마우스 오버시 DIV 레이어 감추기 / 보이기
<!-- 소스 Start -->
<a href=" style="margin-left:20px;width:100px;"
Onmouseover="
document.getElementById('top1').style.display='block';
document.getElementById('top2').style.display='none';
document.getElementById('top3').style.display='none';
document.getElementById('top4').style.display='none';
document.getElementById('top5').style.display='none';
">
우동 </a>
<a href=" style="margin-left:20px;width:100px;"
Onmouseover="
document.getElementById('top2').style.display='block';
document.getElementById('top1').style.display='none';
document.getElementById('top3').style.display='none';
document.getElementById('top4').style.display='none';
document.getElementById('top5').style.display='none';
">짜장 </a>
<a href=" style="margin-left:20px;width:100px;"
Onmouseover="
document.getElementById('top3').style.display='block';
document.getElementById('top2').style.display='none';
document.getElementById('top1').style.display='none';
document.getElementById('top4').style.display='none';
document.getElementById('top5').style.display='none';
">짬뽕 </a>
<br>
<!-- 보기에 대한 내용 Start-->
<div id="top1" style="display:none;width:200px;height:200px;">
<img src="http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzQxMTk3QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvODIuanBn" />
</div>
<div id="top2" style="display:none;width:200px;height:200px;">
<img src="http://l.yimg.com/go/news/picture/2010/g7/20100702/20100702083129394g7_083651_0.jpg?x=80&sig=KdrNWVmtst7G5t3DIMskeA--" />
</div>
<div id="top3" style="display:none;width:200px;height:200px;">
<img src="http://l.yimg.com/go/news/picture/2010/h1/20100702/20100702090308690h1_092652_0.jpg?y=60&sig=JBMg3GwqS0dOqgyIlnqejw--" />
</div>
<div id="top4" style="display:none;width:200px;height:200px;">
<img src="http://l.yimg.com/go/news/picture/2010/h1/20100702/20100702032502275h1_032652_0.jpg?x=80&sig=dt8i6TSHVaqH3_yQ6T7fkw--" />
</div>
<div id="top5" style="display:none;width:200px;height:200px;">
<img src="http://l.yimg.com/go/news/picture/2010/b6/20100701/20100701153555488b6_154201_0.jpg?y=60&sig=B1hMrvQ3dS4bzN0qSfsKlg--" />
</div>
<!-- 보기에 대한 내용 End-->
</div>
둥근 모서리 박스 자동 생성
<script language='javascript'>
function overView(no){
for(i=1;i<=5;i++){
document.getElementById('top'+i).style.display='none';
}
document.getElementById('top'+no).style.display='block';
}
</script>
<a href=" style="margin-left:20px;width:100px;" Onmouseover="overView(1)"> 우동 </a>