Version complète: jsB@nk » Lien » Rollover animation pour textlinks
URL: https://www.javascriptbank.com/rollover-animation-for-textlinks.html
Cet JavaScript crée un rollover animation pour textlinks et boutons (photos). Le bon zoom-in-zoom-out effet requiert presque pas de bande passante. Vous mai de chaque série JavaScript lien d'une couleur différente et une autre borderwidth. Un chargement rapide. True copier et coller l'installation. Très facile de configuration. Dégrade bien avec les navigateurs non IE5x.
Version complète: jsB@nk » Lien » Rollover animation pour 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-->