Links con cornici colorate

Links con cornici colorate

Crediti: Urs Dudli and Peter Gehrig
Name: Peter Gehrig and Urs Dudli
Website: www.24fun.com

Descrizione: Questo script serve per evidenziare maggiormente un link prima che questo venga premuto, provate voi stessi a passare col cursore del mouse sopra uno qualsiasi dei links contenuti in questa pagina.

Oltre al colore è possibile variare anche le dimensioni del rettangolo.

Script:
Dopo aver copiato il codice sottostante incollatelo nella vostra pagina web, in questo caso immediatamente prima del tag: </body> praticamente a fondo pagina!

<script language="JavaScript" type="text/javascript"> // 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>") } // End --> </script>

Html:
Una volta inserito lo script a fine pagina e prima della chiusura del tag </body> non resta che associare ai vari link l'effetto, quello sotto è un esempio:

Per cambiare il colore basta inserire un nome valido in lingua inglese per richiamare il colore preferito, in questo caso il rosso è specificato da red. E' possibile variare anche le dimensioni del rettangolo che lampeggia intorno al link, in questo caso basta aumentare o diminuire il numero, 4 nel nostro esempio, subito dopo il colore.

Ricordatevi di modificare il secondo codice, al posto del mio indirizzo mettete il vostro se no i link richiameranno sempre il mio sito :-)

Copyright © 100 % Tutti i diritti riservati

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.