인터넷정보

링크누르면 푹 들어가는 스크립트

알 수 없는 사용자 2007. 10. 17. 18:15


링크 클릭하면 1픽셀 내려가는 스크립트입니다.
<br><br>
TD안에 있는 Element에 적용가능하며 원리는... <br>
이벤트가 발생하는 태그를 잡아낸 후, 최초의 TD가 나올때까지 parentElement로 죽어라 찾아올라갑니다. <br>
첫번째 TD가 잡히면 TD의 padding-top 속성을 조절함으로써 내렸다 올렸다 하는 것입니다. <br>
셀의 HEIGHT와 VALIGN이 있어야 작동합니다. (예제 참고) <br>
srcElement와 parentElement는 IE 전용 메쏘드입니다. 즉, IE에서만 돌아간다는 얘기지요.<br>
함수를 하나로 합치는 것도 가능하겠고, 몇픽셀인지도 인자로 넘기는 것도 가능하겠네요. 잘 수정해서 쓰세요 (__) <br>
<br>
<script>
function FX1px()
{
        var el = event.srcElement;
        while(el.tagName != "TD")
                el = el.parentElement;
        el.style.paddingTop = "1px";
}

function DeFX1px()
{
        var el = event.srcElement;
        while(el.tagName != "TD")
                el = el.parentElement;
        el.style.paddingTop = "0px";
}
</script>

<table cellpadding=0 cellspacing=0 border=0>
<tr height=32 valign=top>
<td><a href=# onmousedown="FX1px()" onmouseup="DeFX1px()" onmouseout="DeFX1px()">눌러보세요</a></td>
</tr>
</table>

<br><br>


초 간단... CSS
A:hover  {color:#ff9900;text-decoration:none;position:relative; top:1; left:-1;}

   

반응형