Gradient Background | Image Maps | Interactive Site | Protect Email Address | Rollover Animation | Rotating Banners | Textlink-shaker | Website Navigation

Member of:
ISOC
IWA
ARTT
RTS

Rollover animation for textlinks and buttons

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.



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='emptyimg.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='emptyimg.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!