	free hosting image hosting hosting reseller online album e-shop famous people

Shaking Link on Mouseover

Another neat script from www.24.fun.com - place your mouse over a link enclosed by other text, and the link starts to shake.

Paste the code below into the head section of your page:

<SCRIPT language="JavaScript"> var oldtext var newtext var newlink var speed=10 var i_speed=1.1 var i_text=1 var timer function startshake(thislink) { if (document.all) { newlink=eval("document.getElementById('"+thislink+"')") oldtext=newlink.childNodes[0].nodeValue shaketext() } } function shaketext() { if (speed<=200) { if (i_text<0) {newtext=oldtext+" "} else if (i_text>0) {newtext=" "+oldtext} newlink.childNodes[0].nodeValue=newtext; i_text=i_text*-1 speed=speed*i_speed timer=setTimeout("shaketext()",speed) } else { clearTimeout(timer) speed=20 newlink.childNodes[0].nodeValue=oldtext; } } function stopshake() { if (document.all) { clearTimeout(timer) speed=20 newlink.childNodes[0].nodeValue=oldtext; } } </script>

And your links should look something like this:

<a href="someURL" name="somename" onMouseOver="startshake(this.name)" onMouseOut="stopshake()">textlink</a>

How It Works

The addition of the name attribute allows you to manipulate the link as a style sheet class.

Its this.name parameter is then passed to the function startshake.

The value of the parameter is what you call the link - textlink in the example above.

This value is then evaluated by newlink=eval("document.getElementById('"+thislink+"').

The document.getElementById retrieves the name you called the link (e.g. somename).

Also, it retrieves the link's exact position on the page.

Hence, if you have a number of links on the page, and wish them to have the same shaking effect, each link must have a different name, so that the correct link is chosen - eg. somename1, somename2 ... etc.

After evaluation, the link's name is now assigned to the variable oldtext.

A second function, shaketext, does the required link shaking.

The variable i_text is used as a flag to determine which direction the link moves.

If i_text is less than zero, the link is shifted to the left by one space, using the statement:

newtext=oldtext+" "

If i_text is greater than zero, the link is shifted to the right by one space:

newtext=" "+oldtext

The resulting value is written to the page using the command:

newlink.childNodes[0].nodeValue=newtext

Why use this complicated nodes method?

Because it ensures that the text is written exactly to the original position of the link.

Otherwise, it could be written anywhere on the page.

The speed of the shaking decelerates by continuously multiplying the initial setting of speed (10) by i_speed (1.1).

With each pass until speed is greater than 200, the value of the timer variable increases.

But since timer uses a setTimeout command, the speed decreases rather than increases.

When speed is greater than 200, the timer is cleared and speed set to 20.

The shaking is stopped by writing the original text back to the page:

newlink.childNodes[0].nodeValue=oldtext

The same thing happens if the mouse moves off the link, by calling the stopshake function.

Try It Out

Place your mouse over the link below:

Click here to e-mail Cyber School