롤오버, 자동 이동 레이어 > script

<style>
body, td {font-size:12}
</style>

<table border="0" cellpadding="0" cellspacing="0" height="160" width="528">
 <tr>
  <td background="http://www.winglish.com/lecture/img/sub_lec_tab_bg.gif" height="23">
   <table border="0" cellpadding="0" cellspacing="0" height="23" width="528">
    <tr>
     <td width="134">
      <div id="top_intro1_on" onmouseover="show_intro(1)" style="display:block">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_01_on.gif" border="0" cellpadding="0" cellspacing="0" class="style1" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom"> 주앤류 TOEIC LC</td>
        </tr>
       </table>
      </div>
      <div id="top_intro1_off" onmouseover="show_intro(1)" style="display:none">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_01.gif" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">주앤류 TOEIC LC</td>
        </tr>
       </table>
      </div>
     </td>
     <td width="131">
      <div id="top_intro2_on" onmouseover="show_intro(2)" style="display:none">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_02_on.gif" border="0" cellpadding="0" cellspacing="0" class="style1" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">주앤류 TOEIC RC</td>
        </tr>
       </table>
      </div>
      <div id="top_intro2_off" onmouseover="show_intro(2)" style="display:block">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_02.gif" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">주앤류 TOEIC RC</td>
        </tr>
       </table>
      </div>
     </td>
     <td width="130">
      <div id="top_intro3_on" onmouseover="show_intro(3)" style="display:none">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_02_on.gif" border="0" cellpadding="0" cellspacing="0" class="style1" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">Julia의 토익베이직</td>
        </tr>
       </table>
      </div>
      <div id="top_intro3_off" onmouseover="show_intro(3)" style="display:block">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_02.gif" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">Julia의 토익베이직</td>
        </tr>
       </table>
      </div>
     </td>
     <td width="132">
      <div id="top_intro4_on" onmouseover="show_intro(4)" style="display:none">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_03_on.gif" border="0" cellpadding="0" cellspacing="0" class="style1" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">주앤류 종합</td>
        </tr>
       </table>
      </div>
      <div id="top_intro4_off" onmouseover="show_intro(4)" style="display:block">
       <table background="http://www.winglish.com/lecture/img/sub_lec_tab_03.gif" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
        <tr>
         <td align="center" valign="bottom">주앤류 종합</td>
        </tr>
       </table>
      </div>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="137">
   <table border="0" cellpadding="0" cellspacing="0" height="137" width="528">
    <tr>
     <td background="http://www.winglish.com/lecture/img/tr_left.gif" height="1" width="2"></td>
     <td height="1" width="524"></td>
     <td background="http://www.winglish.com/lecture/img/tr_right.gif" height="1" width="2"></td>
    </tr>
    <tr>
     <td background="http://www.winglish.com/lecture/img/tr_left.gif" width="2"></td>
     <td width="524">
      <div id="intro_img1" style="display:block"><a href="./lecture_info.asp?lang_kind=T&part_kind=TOE&service=59"><img border="0" height="134" src="http://www.winglish.com/image/intro/intro_59.jpg" width="524"></a></div>
      <div id="intro_img2" style="display:none"><a href="./lecture_info.asp?lang_kind=T&part_kind=TOE&service=60"><img border="0" height="134" src="http://www.winglish.com/image/intro/intro_60.jpg" width="524"></a></div>
      <div id="intro_img3" style="display:none"><a href="./lecture_info.asp?lang_kind=T&part_kind=TOE&service=701"><img border="0" height="134" src="http://www.winglish.com/image/intro/intro_701.jpg" width="524"></a></div>
      <div id="intro_img4" style="display:none"><a href="./package_info.asp?lang_kind=T&part_kind=TOE&service=955"><img border="0" height="134" src="http://www.winglish.com/image/intro/intro_955.jpg" width="524"></a></div>
     </td>
     <td background="http://www.winglish.com/lecture/img/tr_right.gif" width="2"></td>
    </tr>
    <tr>
     <td height="2" width="2"><img src="http://www.winglish.com/lecture/img/tr_corner_03.gif"></td>
     <td background="http://www.winglish.com/lecture/img/tr_bottom.gif" height="2" width="524"></td>
     <td height="2" width="2"><img src="http://www.winglish.com/lecture/img/tr_corner_04.gif"></td>
    </tr>
   </table>
  </td>
 </tr>
</table>

<script language="javascript">
setInterval("show_intro(0)", 3000);
var cur_num = 1; // 현재번호

function show_intro(num)
{
 if(num==0)
 {
  cur_num = cur_num + 1;
  if(cur_num>4)
  {
   cur_num = 1;
  }
 }
 else
 {
  cur_num = num;
 }

 for(var i=1; i<=4; i++)
 {
   // 현재 번호와 같은 것은 보여주고, 그렇지 않은 것은 보여주지 않는다.
   if(i==cur_num)
  {
   eval("document.all.intro_img"+i+".style.display='block'");
   eval("document.all.top_intro"+i+"_off.style.display='none'");
   eval("document.all.top_intro"+i+"_on.style.display='block'");
  }
  else
  {
   eval("document.all.intro_img"+i+".style.display='none'");
   eval("document.all.top_intro"+i+"_on.style.display='none'");
   eval("document.all.top_intro"+i+"_off.style.display='block'");
  }
 }
}
</script>

http://www.winglish.com/lecture/lecture_list.asp?Lang_Kind=T&Part_Kind=TOE