Log in

View Full Version : Need help for a little modification for the script of Shake image on Mouseover


ma rafa
05-17-2013, 11:00 AM
1) Title:
Need help for a little modification for the script of Shake image on Mouseover

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/shake.htm

3) Describe problem:

As I am new to Javascript.
I want to shake an image as reference is provided for the DD script via the link above.
1- onMouseover a Link
2- and onMouseover another image.

How I can make changes in the script for.

For example,

<a href="#" onMouseover="init('pic1');rattleimage()" onMouseout="stoprattle('pic1');top.focus()" onClick="top.focus()"> Click here </a>
<img src="images/pic1.png" class="shakeimage" id="pic1">

and

<img src="images/mainpic.png" onMouseover="init('pic1');rattleimage()" onMouseout="stoprattle('pic1');top.focus()" onClick="top.focus()">
<img src="images/pic1.png" class="shakeimage" id="pic1">

An immediate reply with solution will appreciate.
Kindly advise
vwphillips
05-17-2013, 01:27 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/


function shake(which,by,ms){
shake.obj?shake.obj.style.top=shake.obj.style.left='0px':null;
which=typeof(which)=='object'?which:document.getElementById(which);
clearTimeout(shake.to);
if (which){
shake.obj=which;
rattleimage(which,typeof(by)=='number'?by:3,0,typeof(ms)=='number'&&ms>50?ms:50);
}
}

function rattleimage(obj,by,nu,ms){
obj.style[nu%2==0?'left':'top']=by*(nu/2>=1?-1:1)+'px';
nu=++nu%4;
shake.to=setTimeout(function(){ rattleimage(obj,by,nu,ms); },ms);
}


</script></head>

<body>

<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="shakeimage" onmouseover="shake(this);" onmouseout="shake();"/></body>
<br />
<br />
<a onmouseover="shake('tst',10,200);" onmouseout="shake();">LINK</a>
<br />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="shakeimage" /></body>
<br />
<br />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" class="shakeimage" onmouseover="shake('tst',5,50);" onmouseout="shake();"/></body>


</html>
ma rafa
05-17-2013, 04:33 PM
WOW! This is what I really want.
Thank you for your help