Link shaker on mouseover javascript.

Link Shaker Javascript
Text link shakes on mouseover

Handy Tip : Like this javascript, things that shake or jump on a webpage draws the visitors eyes to that particular effect, but don't go overboard with the moving business as it could turn some of your visitors competely off and they will never come back.

Bookmark This Page

Textlink Shaker on MouseOver Peter Gehrig and Urs Dudli

Another great and very useful javascript from arguably the greatest writers of dhtml and javascript. This shakes each text link and gives ordinary text links a special effect that is appealing and makes your website more dynamic.

Just move your cursor over this textlink and the link shakes on mouseover. Great if you want to add a special effect that draws more attention than any other simple CSS rollovers. Very easy to setup. Requires Internet Explorer 5 or higher.

The Link Shaker javascript can be applied to as many links on the webpage as you like. Name each textlink a different number. eg link1 .. link2... etc.

Installation:

STEP 1

Copy and paste the link shaker javascript below into the <head> of your html document. There is nothing in this part to alter. Credits must remain intact.

<SCRIPT language="JavaScript"> // CREDITS: // Textlink-Shaker onMouseOver // by Urs Dudli and Peter Gehrig // Copyright (c) 2000 Peter Gehrig and Urs Dudli. http://www.24fun.com All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.hypergurl.com 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>

STEP 2;

Where you want each text link place this code;

<a href="http://www.yourlink.com" name="link1" onMouseOver="startshake(this.name)" onMouseOut="stopshake()">textlink</a>

Change "yourlink.com" to whatever your link url is, name the link 1.. 2.. or whatever and finally change the link description to suit.

Should look something like this; Change the red type to suit.

<a href="http://www.hypergurl.com" name="link1" onMouseOver="startshake(this.name)" onMouseOut="stopshake()">Hypergurl Webhosting</a>

Hypergurl Hosting

IMPROVED PLANS
FREE Domain Name

web hosting and domain registration

NEW!
Blog for Webmasters

Website Design

Home