This script creates a unique rollover animation for textlinks and buttons (pictures). The smooth zoom-in-zoom-out effect requires almost no bandwidth. You may set each link to a different color and a different borderwidth. Fast loading. True copy and paste installation. Very easy configuration. Made for IE5+ and higher. Degrades well with non IE5+ browsers.

Test the script

Move your mouse over this short link or put it over this very long textlink to test the highlight effect. You may even apply it on linked images (move your mouse over the picture on the left hand side).





Configuration

Step 1: Open your webpage. Insert the below code immediately above the </body> tag:

<SCRIPT> // CREDITS: // Rollover animation for textlinks and buttons // by Urs Dudli and Peter Gehrig // Copyright (c) 2001 Peter Gehrig and Urs Dudli. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.com // info@24fun.com // 11/27/2001 // IMPORTANT: // If you add this script to a script-library or a script-archive // you must insert a highly visible and clickable link to http://www.24fun.com // right into the webpage where the script will be displayed. // Do not edit the code below var maxborder_thickness var border_thickness var i_fadestrength var i_fadestrengthstep var linkpostop var linkposbottom var linkposleft var linkposright var linewidth var lineheight var animatedlink var animatedcolor var interval=50 var plusorminus=1 function showlines(animatedlink,animatedbordercolor,maxwidth) { if (document.all) { thislink=animatedlink thisbordercolor=animatedbordercolor maxborder_thickness=maxwidth border_thickness=1 i_fadestrength=100; i_fadestrengthstep=Math.floor(100/maxborder_thickness) animation=true doanimation() } } function doanimation() { if (animation) { if (border_thickness>=maxborder_thickness || border_thickness<1) { plusorminus*=-1 } border_thickness+=plusorminus i_fadestrength=100-(i_fadestrengthstep*border_thickness) border_color=thisbordercolor linkpostop=thislink.offsetTop linkposbottom=linkpostop+thislink.offsetHeight linkposleft=thislink.offsetLeft linkposright=linkposleft+thislink.offsetWidth linewidth=linkposright-linkposleft+(4*border_thickness) lineheight=linkposbottom-linkpostop+(4*border_thickness) document.all.linetopimg.style.posTop=linkpostop-(2*border_thickness) document.all.linetopimg.style.posLeft=linkposleft-(2*border_thickness) document.all.linebottomimg.style.posTop=linkpostop+lineheight-(2*border_thickness) document.all.linebottomimg.style.posLeft=linkposleft-(2*border_thickness) document.all.lineleftimg.style.posTop=linkpostop-(1*border_thickness) document.all.lineleftimg.style.posLeft=linkposleft-(2*border_thickness) document.all.linerightimg.style.posTop=linkpostop-(1*border_thickness) document.all.linerightimg.style.posLeft=linkposleft+linewidth-(3*border_thickness) var linetopimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">" linetopimgcontent+="<img src='pic3.gif' width="+linewidth+" height="+border_thickness+">" linetopimgcontent+="</td></tr></table>" var linebottomimgcontent=linetopimgcontent var lineh=lineheight-border_thickness var lineleftimgcontent="<table border=0 cellpadding=0 cellspacing=0><tr><td bgcolor="+border_color+">" lineleftimgcontent+="<img src='pic3.gif' width="+border_thickness+" height="+lineh+">" lineleftimgcontent+="</td></tr></table>" var linerightimgcontent=lineleftimgcontent linetopimg.filters.alpha.opacity=i_fadestrength linebottomimg.filters.alpha.opacity=i_fadestrength lineleftimg.filters.alpha.opacity=i_fadestrength linerightimg.filters.alpha.opacity=i_fadestrength linetopimg.innerHTML=linetopimgcontent linebottomimg.innerHTML=linebottomimgcontent lineleftimg.innerHTML=lineleftimgcontent linerightimg.innerHTML=linerightimgcontent document.all.linetopimg.style.visibility="visible" document.all.linebottomimg.style.visibility="visible" document.all.lineleftimg.style.visibility="visible" document.all.linerightimg.style.visibility="visible" var timer=setTimeout("doanimation()",interval) } else { clearTimeout(timer) } } function hidelines() { if (document.all) { animation=false document.all.linetopimg.style.visibility="hidden" document.all.linebottomimg.style.visibility="hidden" document.all.lineleftimg.style.visibility="hidden" document.all.linerightimg.style.visibility="hidden" } } if (document.all) { document.write("<a span id='linetopimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='linebottomimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='lineleftimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") document.write("<a span id='linerightimg' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=100)'> </span>") } </script>

Step 2: Paste the below green/red/blue code into any textlink, as shown here:
<a href="http://www.yourlink.com" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">testlink</a>

green code: do not change the green code.
red code: the color of the expanding box.
blue code: the width of the expanding boxlines.

Step 3: Download this white tiny image --> <-- by right clicking it, and selecting "save as". Put the image into the same folder as your webpage!