메뉴 보이기
Profile
이온디

2015.08.28

문제

onMouseout과 setTimeout 사용법

조회 수 90 추천 수 0
URL http://kin.naver.com/qna/detail.nhn?d1id...fJNQ%3D%3D 
Code 홈페이지 메뉴를 만드는 데 문제가 생겨 질문입니다.

질문 아래에 코드 전문을 올려놓았는데, 보시면서 읽어주세요.
제가 지금 하려는 것은,
onMouseover시 주메뉴에 해당하는 표 셀 배경이 test3.gif로 전환되었다가,
onMouseout시 1000ms 후에 셀 배경이 다시 사라지도록 만들려고 하나 이게 먹통입니다.
(표는 이중으로 되어 있는데, 이 중 안은 표는 배경이 고정되어있고, 안긴 표의 셀 배경을 전환시키려고 하는 겁니다.)

나모 웹에디터의 행패때문에 어쩔수 없이 스크립트부를 두번 작성할 수 밖에 없었습니다.
어쨌든 함수가 여러개 얽혀있는데, 아무래도 setTimeout을 두군데 이상에서 사용하는게 문제인거 같습니다.
(단순히 제가 코딩을 못해서인지도 모르겠습니다..)

namosw_cell_rollover와 namosw_cell_rollout함수에 의해서 주메뉴 부분의 배경전환이 이루어지고,
showmenu와 setmenutimer에 의해 하위메뉴의 표시/비표시가 이루어집니다.


주메뉴 셀 설정의 OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)부분에서
setTimeout('namosw_cell_rollout(this)', 1000)으로 설정해봤으나 되질 않았고,
fuction menubghide()를 새로 만들어 내부에서 namosw_cell_rollout을 딜레이시켜 호출하는 방법도 시도는 해봤으나 잘 안되는군요...


해당 부분의 해결이 가능하신분은 좀 도와주세요..





아래부터는 제작중 페이지의 코드 전문입니다.
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="generator" content="Namo WebEditor">
<style>
<!--
.nmsw_A { font-family:굴림; font-style:normal; font-weight:bold; font-size:9pt; color:black; background-image:url('test3.gif'); }
-->
</style>

<script language="JavaScript">
<!--
function namosw_cell_rollover(cell, classname) {
if (document.all || document.getElementById) {
cell.classBackup = cell.className;
cell.className = classname;
}
}

function namosw_cell_rollout(cell)
{
if (document.all || document.getElementById) {
cell.className = cell.classBackup;
}
}
// -->
</script>
<body bgcolor="white" text="white" link="blue" vlink="purple" alink="red" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">

<!---------------------------------------- 스크립트부 ------------------------------------------>
<SCRIPT LANGUAGE="JavaScript">
<!--
var delaytime = 1000; // 메뉴 지속 시간
var menutimer = 0; // 메뉴 시간 설정 타이머
var cursubmenu = ""; // 현재 메뉴

function showmenu(menu)
{
if ( cursubmenu != "" ) document.getElementById(cursubmenu).style.display = "none";
cursubmenu = menu;
document.getElementById(menu).style.display = "block";

resetmenutimer();
}

function submenu_hide()
{
document.getElementById(cursubmenu).style.display = "none";
}

function setmenutimer()
{
resetmenutimer();
menutimer = window.setTimeout(submenu_hide, delaytime);
}

function resetmenutimer()
{
if ( menutimer )
{
window.clearTimeout(menutimer);
menutimer = 0;
}
}
//-->
</SCRIPT>
<!---------------------------------------- 스크립트부 끝 ------------------------------------------>
<div style="line-height:30%;">
<!---------------------------------------- 주메뉴 ------------------------------------------>

<table align="center" cellpadding="0" cellspacing="0" width="1024" height="32" style="margin-top:0; margin-bottom:0;">
<tr>
<td width="1024" background="test4.gif">
<div align="left">
<table cellpadding="0" cellspacing="0" height="32">
<tr>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
<td width="100" height="5"></td>
<td width="10" height="5"></td>
</tr>
<tr>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu0'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">TOP</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu1'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">ABOUT US</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu2'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">PEOPLE</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu3'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">BOARD</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu4'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">GALLERY</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu5'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">PDS</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
<td width="100" height="27" OnMouseOver="javascript_:showmenu('submenu6'); namosw_cell_rollover(this, 'nmsw_A')" OnMouseOut="javascript_:setmenutimer(); namosw_cell_rollout(this)">
<p align="center"><span style="font-size:9pt;">ETC</span></p>
</td>
<td width="10" height="27">
<p align="center"><img src="test2.gif" width="2" height="14" border="0"></p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<!---------------------------------------- 주메뉴 끝 ------------------------------------------>
<font color="black"><br>
<!---------------------------------------- 부메뉴 ------------------------------------------>
</font>

<TABLE height="20" id="submenu0" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
</TABLE>

<TABLE height="20" id="submenu1" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴1</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴2</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴3</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<TABLE height="20" id="submenu2" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴4</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴5</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴6</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<TABLE height="20" id="submenu3" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴7</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴8</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴9</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<TABLE height="20" id="submenu4" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴10</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴11</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴12</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<TABLE height="20" id="submenu5" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴13</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴14</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴15</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<TABLE height="20" id="submenu6" style="position:absolute;display:none;border:0 solid " OnMouseOver="javascript_:resetmenutimer();" OnMouseOut="javascript_:setmenutimer();" cellpadding="0" cellspacing="0">
<TR>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴16</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴17</font></span><font color="black"></font></p>
</TD>
<TD width="8">
<p align="center"><span style="font-size:9pt;"><font color="black">|</font></span><font color="black"></font></p>
</TD>
<TD width="80">
<p align="center"><span style="font-size:9pt;"><font color="black">하위메뉴18</font></span><font color="black"></font></p>
</TD>
</TR>
</TABLE>

<font color="black"><!---------------------------------------- 부메뉴 끝 ------------------------------------------>
</font></div>

</body>

</html> 

어려운 작업을 하시는군요. 쉬울 것 같지만 그리 쉽지 않습니다.

setTimeout 함수의 첫번째 인수에 this 객체를 인수로 받는 함수를 지정할 수 없거든요.

문자열로 setTimeout('namosw_cell_rollout(this)', 1000) 이렇게 주게되면

1초 후에 실행 시 this는 실행 전의 this가 아니게 되어버립니다.

 

1. 쉬운 방법은 숫자나 문자를 인수로 받는 함수를 작성하는 것입니다.

setTimeout('namosw_cell_rollout(99)', 1000);

setTimeout('namosw_cell_rollout("submenu01")', 1000);

이런 식이죠.

 

2. 한가지 방법이 더 있습니다. this를 사용할 수도 있는 방법입니다.

setTimeout(function (this) { do(this) }, 1000);

이와 같이 익명의 함수를 지정하는 방법입니다.

하지만 이 방법은 메모리가 해제되지 못하는 코드로 메모리가 낭비되는 코드이므로 사용에 주의가 필요합니다.

 

3. 나머지 방법 중 고급에 속하는 방법은 객체를 만들고 객체를 call 이나 apply 함수로 호출하는 코드를 작성할 수도 있습니다. 하지만 이 방법은 이와 같은 간단한 작업에 어울리지 않습니다. 주로 요즘 유행하는 여러 라이브러리에서 사용되는 방법입니다.

 

가장 쉬운 1번으로 예를 들어보일게요.

 

다음은 메뉴를 구성하는 HTML입니다.

질문자님의 코드와 비슷하지만 각 메뉴에 id 속성이 지정되어 있고,

이벤트에서 이 id와 연관된 숫자를 인수로 호출하는 것을 눈여겨 봐주세요.

 

  <table border="1">
  <tr>
   <td id="m1" onmouseover="showMenu(1)" onmouseout="hideMenu(1)">Menu 01</td>
   <td id="m2" onmouseover="showMenu(2)" onmouseout="hideMenu(2)">Menu 02</td>
   <td id="m3" onmouseover="showMenu(3)" onmouseout="hideMenu(3)">Menu 03</td>
  </tr>
 </table>

 <table border="1" id="s1" style="display:none"><tr><td>Submenu 01</td></tr></table>
 <table border="1" id="s2" style="display:none"><tr><td>Submenu 01</td></tr></table>
 <table border="1" id="s3" style="display:none"><tr><td>Submenu 01</td></tr></table>

 

다음은 스타일시트입니다.

예를 들기위해 이미지가 아닌 배경색을 사용했습니다. 

 

 <style type="text/css">
  .showMenu { font-weight: bold; background-color: #ef3; }
 </style>

 

다음은 스크립트.

setTimeout('doHideMenu(' + idx + ')', 1000); 와 같이 인수로 전달받은 idx로 하나의 문자열을 만들어 호출하는 것을 눈여겨 봐주세요.

 

  <script type="text/javascript">
  function showMenu(idx) {
   document.getElementById('m' + idx).className = 'showMenu';
   document.getElementById('s' + idx).style.display = 'block';
  }

  function hideMenu(idx) {
   setTimeout('doHideMenu(' + idx + ')', 1000);
  }

  function doHideMenu(idx) {
   document.getElementById('m' + idx).className = '';
   document.getElementById('s' + idx).style.display = 'none';
  }
 </script>

 

 

질문자님의 의도대로 작동하나요?

혹시 이상하다면 추가 의견에 남겨주시면 확인하는대로 추가답변 드릴게요~

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
54 [고급팁] Asynch JS: The Power Of $.Deferred profile 이온디 2016.06.10 33
53 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) profile 이온디 2016.06.10 74
52 [차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 profile 이온디 2016.06.02 3563
51 [차트] 접근성을 고려한 차트 라이브러리, Nwagon profile 이온디 2016.06.02 250
50 [라이브러리] 모바일 터치 제스츄어 profile 이온디 2016.02.22 40
49 [기초] 자바스크립트 페이지이동 profile 이온디 2015.08.31 378
48 [iframe] 금융투자협회 아이프레임 적용 소스 profile 이온디 2016.01.16 0
47 [iframe] iframe 높이 재설정(크롬 지원, IE 미지원) profile 이온디 2016.01.06 384
46 [차트] echarts profile 이온디 2015.12.21 355
45 [차트] amcharts profile 이온디 2015.12.18 222
44 [팁] 웹사이트 콘텐츠 복사 제한하기 profile 이온디 2015.09.15 81
43 [팁] 끊김없이 흐르는 배너(2009. 10. 12) profile 이온디 2015.09.13 204
42 [팁] 자바스크립트 성능 향상 팁 profile 이온디 2015.09.04 54
41 [form] [javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준) profile 이온디 2015.08.31 7164
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) profile 이온디 2015.08.31 60
39 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) profile 이온디 2015.08.28 74
38 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) profile 이온디 2015.08.28 85
[문제] onMouseout과 setTimeout 사용법 profile 이온디 2015.08.28 90
36 [고급팁] 자바스크립트 this profile 이온디 2015.08.26 209