onMouseout과 setTimeout 사용법

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

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>

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

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