<html>
<head>
<title>해피CGI</title>
</head>
<body>
아래 링크에 마우스를 올려보세요..
<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>
</BODY>
</HTML>
|
