<html>
<head>
<title>메뉴 & 레이어</title>
<style type="text/css">
<!--
table{border:solid 2px #ececec;}
.base
{
font-size:10pt;
color:black;
background-color:white;
}
.base-turnover
{
font-size:10pt;
color:white;
background-color:red;
}
div
{
border:solid 0px #ececec;
font-size:10pt;
color:black;
position:absolute;
width:120;
height:20;
padding:2;
visibility:hidden;
}
-->
</style>
<script language="javascript">
<!--
function baseRollOver(tbl_ID,state)
{
document.getElementById(tbl_ID).className=(state=='on')?'base-turnover':'base';
}
function MM_findObj(n, d) {
var p,i,x;
if(!d) d = document;
if( (p=n.indexOf("?"))>0 && parent.frames.length ) {
d = parent.frames[n.substring(p+1)].document;
n = n.substring(0,p);
}
if( !(x=d[n]) && d.all )
x = d.all[n];
for (i=0; !x&&i<d.forms.length; i++)
x=d.forms[i][n];
for(i=0; !x&&d.layers&&i<d.layers.length; i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)
x=d.getElementById(n);
return x;
}
function MM_showHideLayers() {
var i,p,v,obj,args = MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3){
if ( (obj=MM_findObj(args[i]))!=null ){
v=args[i+2];
if (obj.style) {
obj = obj.style;
v = (v=='show')?'visible':(v=='hide')?'hidden':v;
}
obj.visibility=v;
}
}
}
-->
</script>
</head>
<body>
<table border=0 cellpadding=3>
<tr>
<th width=5></th>
<th class="base" id="menu1" onmouseover="baseRollOver('menu1','on');MM_showHideLayers('layer1','','show','layer2','','hide','layer3','','hide','layer4','','hide');"
onmouseout="baseRollOver('menu1','off')" style=cursor:hand;>가입</th>
<th width=5></th>
<th class="base" id="menu2" onmouseover="baseRollOver('menu2','on');MM_showHideLayers('layer1','','hide','layer2','','show','layer3','','show','layer4','','hide');"
onmouseout="baseRollOver('menu2','off')" style=cursor:hand;>커뮤니티</th>
<th width=5></th>
<th class="base" id="menu3" onmouseover="baseRollOver('menu3','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','show','layer4','','hide');"
onmouseout="baseRollOver('menu3','off')" style=cursor:hand;>새소식</th>
<th width=5></th>
<th class="base" id="menu4" onmouseover="baseRollOver('menu4','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','hide','layer4','','show');"
onmouseout="baseRollOver('menu4','off')" style=cursor:hand;
onClick="location.href='http://www.nate.com'">링크</th>
<th width=5></th>
</tr>
</table>
<div id="layer1" style="left:25px; top:50px;" onmouseover="baseRollOver('layer1','on')"
onmouseout="baseRollOver('layer1','off')"> 가입하러가기</div>
<div id="layer2" style="left:76px; top:50px;" onmouseover="baseRollOver('layer2','on')"
onmouseout="baseRollOver('layer2','off')"> Q&A게시판</div>
<div id="layer3" style="left:150px; top:50px;" onmouseover="baseRollOver('layer3','on')"
onmouseout="baseRollOver('layer3','off')"> 자유게시판</div>
<div id="layer4" style="left:210px; top:50px;" onmouseover="baseRollOver('layer4','on')"
onmouseout="baseRollOver('layer4','off')"> 공지사항</div>
</body>
</html>
zb4pl8.zip
mouse_layer.js