묻고답하기
메뉴 스크립트 관련 질문...
2003.05.09 14:10
http://www.amsachurch.com/index5.html자바스크립트의 강좌란에 올려 주신 Eccen 님의 쏘스를 응용해서,
제 홈페이지를 꾸미려 하는데...
주메뉴에 마우스 온하고 서브 메뉴로 이동하려고 하면,
서브메뉴가 없어집니다...
설정을 무엇인가 바꿔줘야 할것 같은데,
저로서는 힘들더군요...
혹시 아시는 분 계시면 도움 부탁드립니다.
관련 페이지 → http://www.amsachurch.com/index5.html
소스 ↓
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>. </title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script>
<!-- 서브레이어 메뉴 출력 -->
<div id="SubMenu1" style="width:120px; height:200px; position:absolute; left:12px; top:115px; z-index:6; visibility:hidden;" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>
<div id="SubMenu2" style="width:125px; height:18px; position:absolute; left:107px; top:115px; z-index:6; visibility:hidden;" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" > 서브 메뉴 2 내용 </div>
<div id="SubMenu3" style="width:120px; height:200px; position:absolute; left:205px; top:115px; z-index:6; 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>
<!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script></body>
</html>
제 홈페이지를 꾸미려 하는데...
주메뉴에 마우스 온하고 서브 메뉴로 이동하려고 하면,
서브메뉴가 없어집니다...
설정을 무엇인가 바꿔줘야 할것 같은데,
저로서는 힘들더군요...
혹시 아시는 분 계시면 도움 부탁드립니다.
관련 페이지 → http://www.amsachurch.com/index5.html
소스 ↓
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>. </title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script>
<!-- 서브레이어 메뉴 출력 -->
<div id="SubMenu1" style="width:120px; height:200px; position:absolute; left:12px; top:115px; z-index:6; visibility:hidden;" onMouseOver="showSubMenu('SubMenu1')" onMouseout="hideSubMenu('SubMenu1')" > 서브 메뉴 1 내용 </div>
<div id="SubMenu2" style="width:125px; height:18px; position:absolute; left:107px; top:115px; z-index:6; visibility:hidden;" onMouseOver="showSubMenu('SubMenu2')" onMouseout="hideSubMenu('SubMenu2')" > 서브 메뉴 2 내용 </div>
<div id="SubMenu3" style="width:120px; height:200px; position:absolute; left:205px; top:115px; z-index:6; 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>
<!-- 메뉴 스크립트 -->
<script>
function showSubMenu(obj) {
switch(obj) {
// 메뉴수에 맞추어 case 를 추가해 주시면 됩니다.
// pWidth 라는 것은 가상적으로 붙여준 이름으로
// 오른쪽 스크롤바에서 부터 서브레이어의 왼쪽 부분 까지의 길이기를 가리킵니다.
case 'SubMenu1' : pWidth = 550; break;
case 'SubMenu2' : pWidth = 465; break;
case 'SubMenu3' : pWidth = 378; break;
}
xPos = document.body.clientWidth - pWidth; // xPos 에 대한 값을 지정하는 부분입니다.
document.all[obj].style.posLeft = parseInt(xPos);// 여기서 posLeft 를 posRight 로 잡아주시면 다시 왼쪽 정렬이 됩니다.
document.all[obj].style.visibility = '';
}
function hideSubMenu(obj) {
document.all[obj].style.visibility = 'hidden';
}
</script></body>
</html>
댓글 3
-
구름
2003.05.09 16:48
-
티카™
2003.05.09 17:07
아!!!!!1 감사합니다.. ^^ -
NeofaN
2003.05.10 21:50
그것을 지우니깐... 계속 남아있습니다.. 저도 같은 문제로 고민중이에요..
이거 지우셈