javascript

하이퍼링크나 이미지 링크에 플래쉬 같은 테두리 효과주기

Maven1 2008. 12. 18. 11:53

[사용법]

1. 먼저 [1단계] 코드를 </BODY> 태그 바로위에 붙여 넣으세요
2. 그다음  왼쪽 이미지를 같은 디렉토리에 업로드 합니다
3. 효과를 적용할 이미지나 링크에 아래와 같은 코드를 붙여 넣으세요

<a href="http://bizsrever.new21.net" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()">홈페이지</a>
<a href="http://bizsrever.new21.net" onMouseOver="showlines(this,'red',16)" onMouseOut="hidelines()"><img src="../img1.jpg"></a>

※ red : 테두리상자의 색상, 16 : 테두리상자의 크기

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Script </title>

<!---- ※ 알아두세요

나모 웹에디터 등으로 작업을 할 경우에는, 이 스크립트를 적용할 문서를 연 후 [html] 코드보기 메뉴(f6)에서 아래의 단계에 따라 차례대로 복사하여 붙여 넣습니다

---->

</head>
<body>

<!-- [1단계] 아래의 코드를 <body> 태그와 </body> 태그안에 붙여 넣으세요 ---->

<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='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>


<!------------------------- 여기까지 ---------------------------------->

</body>
</html>