Full version: jsB@nk » Link » Rollover animation for textlinks
URL: https://www.javascriptbank.com/rollover-animation-for-textlinks.html
This JavaScript 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 JavaScript link to a different color and a different borderwidth. Fast loading. True copy and paste installation. Very easy configuration. Degrades well with non IE5x browsers.
Full version: jsB@nk » Link » Rollover animation for textlinks
URL: https://www.javascriptbank.com/rollover-animation-for-textlinks.html
<SCRIPT>// Do not edit the code belowvar maxborder_thicknessvar border_thicknessvar i_fadestrengthvar i_fadestrengthstepvar linkpostopvar linkposbottomvar linkposleftvar linkposrightvar linewidthvar lineheightvar animatedlinkvar animatedcolorvar interval=50var plusorminus=1function 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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><a href="http://www.javascriptbank.com" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">Mouse over this to see</a><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->