메뉴 상자 예제 1
../





이미지 바꾸기를 할때에는 기존의 이미지와 바꿀 이미지들로 두 벌이 필요합니다. 두 벌로 사용하지 않고 한 개의 이미지를 사용하여 이미지 바꾸기 같은 동작을 합니다. 이런 효과는 절대좌표를 지정한 레이어 밑에 이미지를 가지고 있는 레이어를 두면 효과를 낼 수 있습니다.

사용한 html은 아래입니다. z-index를 지정하면 되겠지만 지정하지 않고 페이지에 순서로 작성하면 먼저 작성한 레이어는 가장 낮은 z-index값을 가지므로 페이지에 가장 위에 둡니다. 

<style>
#bar { position:absolute; left:0px; top:100px; width:20; visibility:hidden; }
#D1 { position:absolute; left:4px; top:104px; width:20;}
#D2 { position:absolute; left:104px; top:104px; width:20;}
#D3 { position:absolute; left:204px; top:104px; width:20;}
#D4 { position:absolute; left:304px; top:104px; width:20;}
#D5 { position:absolute; left:404px; top:104px; width:20;}
</style>

<div id=bar><img src="bar.gif" width=100 height=30 alt="bar"></div>
<div id=menuBox>
    <div id=D1><a href="#"><img src="bb1.jpg" width=92 height=22 border=0 alt="bb1"></a></div>
    <div id=D2><a href="#"><img src="bb2.jpg" width=92 height=22 border=0 alt="bb2"></a></div>
    <div id=D3><a href="#"><img src="bb3.jpg" width=92 height=22 border=0 alt="bb3"></a></div>
    <div id=D4><a href="#"><img src="bb4.jpg" width=92 height=22 border=0 alt="bb4"></a></div>
    <div id=D5><a href="#"><img src="bb5.jpg" width=92 height=22 border=0 alt="bb5"></a></div>
</div>
위의 굵은 글자가 이미지 바꾸기할 이미지를 가지고 있는 레이어입니다. 다른 레이어의 밑으로 오게 먼저 작성해 줍니다. 그래야 다른 레이어는 마우스를 눌렀을 때, 다른 페이지로 이동할 수 있습니다.

지정한 이벤트입니다. 

function init() {
    for (var i=1; i < 6; i++) {
        if(document.layers) {
	    document.layers["D"+i].onmouseout = new Function("document.bar.visibility='hidden'")
	    document.layers["D"+i].onmouseover = new Function("document.bar.left=this.left-4; document.bar.visibility='visible'")
	}
	else if(document.all) {
	    document.all["D"+i].onmouseout = new Function("bar.style.visibility='hidden'")
	    document.all["D"+i].onmouseover = new Function("bar.style.pixelLeft=this.style.pixelLeft-4; bar.style.visibility='visible';")
	    document.all["D"+i].style.pixelLeft = (i-1)*100+4	
	}
    }
}
</script>
</head>
<body onLoad="init()">
각 매뉴 레이어에게 마우스가 가면 알맞은 위치에 이미지를 보여주고 치우면 감춥니다. 지정할 거리는 각 이미지들의 크기에 맞게 지정하면 됩니다.

이 예제 페이지는 이미지를 적게 사용하고도 이미지 바꾸기 동작을 left, top, visibility를 이용하여 낼 수 있게 하는 페이지입니다.

bar



T O P