아래소스는 롤오버 레이어 메뉴입니다.
그런데..이미지메뉴를 만들려고 합니다.
그런데 마우스를 대면 바뀌고 마우스를 때면 바뀌지 않는 방법이나...
마우스로 클릭했을 경우에만 레이어를 보이게 할수 있는 방법이 없나 해서요..


<!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
        document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
        document.all[obj].style.visibility = 'hidden';
        }
</script>




━━━━━━━━━━

이제 각 서브 메뉴의 위치를 레이어로 조정하셔야 합니다.


<!-- 서브레이어 메뉴 출력 -->

<div id=SubMenu1 style="z-index:6; position:absolute; left:12px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>

<div id=SubMenu2 style="z-index:6; position:absolute; left:107px; top:115px; width:125px; visibility: hidden; height: 15px;" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" > 서브 메뉴 2 내용 </div>

<div id=SubMenu3 style="z-index:6; position:absolute; left:205px; top:115px; width:120; visibility: hidden" onMouseOver="showSubMenu('SubMenu3')" onMouseout="hideSubMenu('SubMenu3')" > 서브 메뉴 3 내용 </div>




━━━━━━━━━━

끝으로 아래와 같은 방식으로 주메뉴를 출력해 주시면 됩니다.


<!-- 주 메뉴 출력 -->

<a href="링크1" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" onfocus=blur()><img src=메뉴1이미지 border=0 width=90 height=59 name="image1"></a>

<a href="링크2" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" onfocus=blur()><img src=메뉴2이미지 border=0 width=90 height=59 name="image2"></a>

<a href="링크3" onMouseOver="showSubMenu('SubMenu3')" onMouseout="hideSubMenu('SubMenu3')" onfocus=blur()><img src=메뉴3이미지 border=0 width=90 height=59 name="image3"></a>