Links con cornice perimetrale colorata

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

Descrizione: Questo script serve per evidenziare maggiormente un link prima che questo venga premuto.
**Oltre al colore è possibile variare anche le dimensioni del rettangolo.

Script: Dopo aver copiato il codice sottostante incollatelo nella vostra pagina web 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 onMouseOver e onMouseOut:

Per cambiare il colore basta inserire un in lingua inglese il nome del colore preferito, ad esempio per avere il rosso dovremo scrivere 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, modificate il mio indirizzo con il vostro.