링크 설명 보여주기

앞의 예제는 링크에게 마우스가 가면 레이어를 보여주었습니다. 작은 내용이었죠. 근데, 보여줄 내용이 많아서 링크 위의 공간도 사용을 하여야 한다면 안내말로 열은 레이어를 링크위에 두어야 합니다. 이 때, 링크위에 레이어가 오기 때문에 레이어를 mouseover로 열수는 있지만 mouseout로 닫을 수가 없습니다. 레이어가 링크 위에 위치하기 때문입니다.

이때는, 링크를 레이어 안에 두고 보여줄 레이어 위에 링크를 가지고 있는 레이어와 같은 크기의 내용물을 가지는 레이어를 같은 좌표에 배치를 하는것입니다. 즉, 이미지는 단순히 좌표만 지정한 레이어에 넣어주고 실제 mouseover, mouseout 이벤트는 같은 크기의 투명 이미지를 가지고 있는 레이어에게 지정을 하는것입니다. 그리고 이것에 mouseover, mouseout 이벤트를 사용하여 보여줄 레이어를 제어하면 됩니다.

내용이 많아서 한 페이지를 넘는 레이어는 보는데 불편합니다. 적당히 조절을 해야합니다. 이 페이지의 효과는 마치 맨밑에 있는 레이어를 중간에 있는 레이어에 상관없이 동작시키는 효과를 내게합니다. 실제는 같은 좌표의 투명이미지로 효과를 내는것 이지만요.

이것을 응용하면 더 재미있는 것도 만들수가 있을것 입니다.

제 상상력은 여기까지 입니다. :)

지정한 style과 HTML입니다.

<style type="text/css">
#home {position:absolute; left:200px; top:150px; width:30px;}
#source {position:absolute; left:200px; top:200px; width:30px;}
#dhtml {position:absolute; left:200px; top:250px; width:30px;}
#homeGuy {position:absolute; left:100px; top:50px; width:500px;visibility:hidden;}
#sourceGuy {position:absolute; left:100px; top:50px; width:500px;visibility:hidden;}
#dhtmlGuy {position:absolute; left:0px; top:50px; width:500px;visibility:hidden;}
#home1x1 {position:absolute; left:200px; top:150px; width:30px;}
#source1x1 {position:absolute; left:200px; top:200px; width:30px;}
#dhtml1x1 {position:absolute; left:200px; top:250px; width:30px;}
</style>

<div id=home><img src="home.gif" width=100 height=30></div>
<div id=home><img src="source.gif" width=100 height=30></div>
<div id=home><img src="dhtml.gif" width=100 height=30></div>
<div id=homeGuy>안내내용</div>
<div id=sourceGuy>안내내용</div>
<div id=dhtmlGuy>안내내용</div>
<div id=home1x1><img src="dot.gif" width=100 height=30></div>
<div id=source1x1><img src="dot.gif" width=133 height=30></div>
<div id=dhtml1x1><img src="dot.gif" width=133 height=30></div>

지정한 이벤트입니다.

<script language="JavaScript1.2">
if(document.layers) {
document.home1x1.onmouseover=new Function("document.homeGuy.visibility='visible'")
document.home1x1.onmouseout=new Function("document.homeGuy.visibility='hidden'")
document.source1x1.onmouseover=new Function("document.sourceGuy.visibility='visible'")
document.source1x1.onmouseout=new Function("document.sourceGuy.visibility='hidden'")
document.dhtml1x1.onmouseover=new Function("document.dhtmlGuy.visibility='visible'")
document.dhtml1x1.onmouseout=new Function("document.dhtmlGuy.visibility='hidden'")
}
else if(document.all) {
document.all.home1x1.onmouseover=new Function("document.all.homeGuy.style.visibility='visible'")
document.all.home1x1.onmouseout=new Function("document.all.homeGuy.style.visibility='hidden'")
document.all.source1x1.onmouseover=new Function("document.all.sourceGuy.style.visibility='visible'")
document.all.source1x1.onmouseout=new Function("document.all.sourceGuy.style.visibility='hidden'")
document.all.dhtml1x1.onmouseover=new Function("document.all.dhtmlGuy.style.visibility='visible'")
document.all.dhtml1x1.onmouseout=new Function("document.all.dhtmlGuy.style.visibility='hidden'")
}
</script>