CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

Show-Hide Layers (by 태그매니아)

이온디
2009년 01월 20일
<body onLoad=ck(1)>
<script>
function ck(n) {
v.innerHTML=document.all('test'+n).innerHTML;
}
</script>
<table border=1 width=300>
<tr><td onMouseOver=ck(1) width=100>메뉴1</td><td onMouseOver=ck(2) width=100>메뉴2</td><td onMouseOver=ck(3) width=100>메뉴3</td></tr>
<tr><td colspan=3 id=v></td></tr>
<span id=test1 style="display:none">
<a href="http://kr.yahoo.com">야후0</a>
<a href="http://kr.yahoo.com">야후2</a>
<a href="http://kr.yahoo.com">야후3</a>
</span>
<span id=test2 style="display:none">
<a href="http://kr.yahoo.com">야후4</a>
<a href="http://kr.yahoo.com">야후5</a>
<a href="http://kr.yahoo.com">야후6</a>
</span>
<span id=test3 style="display:none">
<a href="http://kr.yahoo.com">야후7</a>
<a href="http://kr.yahoo.com">야후8</a>
<a href="http://kr.yahoo.com">야후9</a>
</span>
</body>

scr_showhidelayer_menu_tagm.png
<body onLoad=ck(1)> 
<script> 
function ck(n) { 
v.innerHTML=document.all('test'+n).innerHTML; 

</script> 
<table border=1 width=300> 
<tr><td onMouseOver=ck(1) width=100>메뉴1</td><td onMouseOver=ck(2) width=100>메뉴2</td><td onMouseOver=ck(3) width=100>메뉴3</td></tr> 
<tr><td colspan=3 id=v></td></tr> 

<span id=test1 style="display:none"> 
<a href="http://kr.yahoo.com">야후0</a> 
<a href="http://kr.yahoo.com">야후2</a> 
<a href="http://kr.yahoo.com">야후3</a> 
</span> 
<span id=test2 style="display:none"> 
<a href="http://kr.yahoo.com">야후4</a> 
<a href="http://kr.yahoo.com">야후5</a> 
<a href="http://kr.yahoo.com">야후6</a> 
</span> 
<span id=test3 style="display:none"> 
<a href="http://kr.yahoo.com">야후7</a> 
<a href="http://kr.yahoo.com">야후8</a> 
<a href="http://kr.yahoo.com">야후9</a> 
</span> 
</body> 

scr_showhidelayer_menu_tag2.png
<body> 
<script> 
function show(n) { 
submenu.innerHTML=document.all('submenu'+n).innerHTML; 


function hide(n) {
submenu.innerHTML="";
}
</script> 
<style>
.mainmenu {float:left;}
</style>

<!-- s : mainmenu -->
<div onMouseOver=show(1) class=mainmenu>메뉴1

</div>
<div onMouseOver=show(2) class=mainmenu>메뉴2</div>
<div onMouseOver=show(3) class=mainmenu>메뉴3</div> 
<!-- e : mainmenu -->

<!-- s : submenu -->
<div id="submenu" style="clear:both;border:1px solid red;position:absolute;top:50px;display:block;width:100%;" onMouseOut=hide()></div>
<span id=submenu1 style="display:none" class="submenu"> 
야후0 
야후2 
야후3 
</span>
 
<span id=submenu2 style="display:none" class="submenu"> 
야후4 
야후5 
야후6 
</span> 
<span id=submenu3 style="display:none" class="submenu"> 
야후7 
야후8 
야후9 
</span> 

<!-- e : submenu -->
</body> 



추천한 사람