[자바스크립트] 이미지롤오버 + 클릭 탭 네비게이션

간단하다면 간단하고 어렵다면 어려워보였던 탭 네비게이션.. 
이미지롤오버와 더불어 클릭시 탭마다 다른 내용의 테이블이 보여지는 네비게이션을 코딩해보았습니다.
핵심은 태그마다 id값이 들어가고, getElementId로 컨트롤한다는 것..

<!-- 이미지에 이미지맵을 입히고 -->
<img id="popup1" src="images/top1.jpg" width="885" height="784" border="0" usemap="#Map">       <input type="hidden" name="id_tmp" id="id_tmp">

<!-- 롤오버 및 클릭시 페이지변환없이 관련 테이블 내용 보여지는 관련 자바스크립트 -->
     <script>
     function click_start(id) {
      document.getElementById('id_tmp').value = id;

      //롤오버 정보 초기화
      for(var i=1; i<6; i++ )
      {
       document.getElementById('btn'+i).src='images/btn'+i+'.gif'
       document.getElementById('btn'+i+'_tb').style.display='none';
      }

      document.getElementById(id+'_tb').style.display='';
      rollOverImg(id);
     
     }
     
     function rollOverImg(id){
      document.getElementById(id).src='images/'+id+'r.gif'
     }
     
     function rollOutImg(id){
      if(document.getElementById('id_tmp').value == id)
       return;
      else
       document.getElementById(id).src='images/'+id+'.gif'      
     }
     </script>

<!-- 네비게이션 탭 테이블 -->
       <table width="800" border="0" cellspacing="0" cellpadding="0" style="margin-left:10px;">
        <tr>
         <td><img id="btn1" src="/promotion/201002/jejutour/images/btn1.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn2" src="/promotion/201002/jejutour/images/btn2.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn3" src="/promotion/201002/jejutour/images/btn3.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn4" src="/promotion/201002/jejutour/images/btn4.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
         <td><img id="btn5" src="/promotion/201002/jejutour/images/btn5.gif" width="151" height="30" onMouseOver="rollOverImg(this.id)" onMouseOut="rollOutImg(this.id)" onClick="click_start(this.id)"></td>
        </tr>
       </table>

<!-- 실험대상 테이블 -->
<!-- 한 행 tr태그마다 id값을 줘야한다. -->

<table>
     <tr id="btn1_tb">
      <td>1</td>
     </tr>
     <tr id="btn2_tb" style="display:none">
      <td>2</td>
     </tr>
     <tr id="btn3_tb" style="display:none">
      <td>3</td>
     </tr>
     <tr id="btn4_tb" style="display:none">
      <td>4</td>
     </tr>
     <tr id="btn5_tb" style="display:none">
      <td>5</td>
     </tr>
   </table>