아래 링크에 마우스를 올려보세요..

| 첫번째 링크 | 두번째 링크 | 세번째 링크 |

아래 링크에 마우스를 올려보세요..
<table style="position:relative"><td>
| <a href="http://www.blueb.co.kr" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">첫번째 링크</a>
| <a href="http://www.blueb.co.kr" onMouseOver="showlines(this,'green',10)" onMouseOut="hidelines()">두번째 링크</a>
| <a href="http://www.blueb.co.kr" onMouseOver="showlines(this,'lightblue',30)" onMouseOut="hidelines()">세번째 링크</a>
|

<SCRIPT>
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='img/blank.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='img/blank.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>

</td></table>

출처 :  해피 CGI