메거진 Channel7

1.  <script>
     function table_view(Number) {
      if (Number=='1') {
       table_1.style.display="block";
       table_2.style.display="none";
       table_3.style.display="none";
       table_4.style.display="none";
       menu01.src="image/product_menu01.gif";
       menu02.src="image/product_menu02_1.gif";
       menu03.src="image/product_menu03_1.gif";
       menu04.src="image/product_menu04_1.gif";
      }
      if (Number=='2') {
       table_1.style.display="none";
       table_2.style.display="block";
       table_3.style.display="none";
       table_4.style.display="none";
        menu01.src="image/product_menu01_1.gif";
       menu02.src="image/product_menu02.gif";
       menu03.src="image/product_menu03_1.gif";
       menu04.src="image/product_menu04_1.gif";
      }
       if (Number=='3') {
       table_1.style.display="none";
       table_2.style.display="none";
       table_3.style.display="block";
       table_4.style.display="none";
        menu01.src="image/product_menu01_1.gif";
       menu02.src="image/product_menu02_1.gif";
       menu03.src="image/product_menu03.gif";
       menu04.src="image/product_menu04_1.gif";
      }
      if (Number=='4') {
       table_1.style.display="none";
       table_2.style.display="none";
       table_3.style.display="none";
       table_4.style.display="block";
        menu01.src="image/product_menu01_1.gif";
       menu02.src="image/product_menu02_1.gif";
       menu03.src="image/product_menu03_1.gif";
       menu04.src="image/product_menu04.gif";
      }
     
      
     }
    </script>

자바스크립트를 이용하여 롤오브와 메뉴 숨김 기능을 적용한 예

html 소스는 다음과 같을때 적용된다.

1.  <!-- 제품소개 -->
         <table border="0" cellpadding="0" cellspacing="0" height="168" valign="top">
           <tr>
             <td width="78"><img src="image/product_title.gif" border="0" /></td>
             <td width="58" align="left" valign="bottom"><img src="image/product_menu01_1.gif" border="0" id="menu01" onmouseover="table_view('1');" /></td>
             <td width="58" align="left" valign="bottom"><img src="image/product_menu02_1.gif" border="0" id="menu02" onmouseover="table_view('2');"/></td>
             <td width="58" align="left" valign="bottom"><img src="image/product_menu03_1.gif" border="0" id="menu03" onmouseover="table_view('3');"/></td>
             <td width="56" align="left" valign="bottom"><img src="image/product_menu04_1.gif" width="55" id="menu04" height="18" border="0" onmouseover="table_view('4');"/></td>
           </tr>
           <tr>
             <td width="308" height="5" background="image/line_top.gif" colspan="5"></td>
           </tr>
           <tr>
             <td colspan="5"><!-- 제품소개내용 -->
               <table border="0" cellspacing="0" cellpadding="0" id="table_1" style="display:block">
                 <tr height="82">
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                   <td width="11" rowspan="2">&nbsp;</td>
                   <td rowspan="2" valign="bottom"><img src="image/introduct_img.gif" width="140" height="93" /></td>
                   <td colspan="2" width="155" valign="bottom"><img src="image/main_75.gif" width="142" height="72" /></td>
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                 </tr>
                 <tr height="21">
                   <td valign="top"><img src="image/main_79.gif" width="110" height="21" /></td>
                   <td valign="bottom" width="45"><a href="#"><img src="image/more02.gif" border="0" /></a></td>
                 </tr>
                 <tr height="11">
                   <td></td>
                 </tr>
               </table>
               <table border="0" cellspacing="0" cellpadding="0" id="table_2" style="display:none">
                 <tr height="82">
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                   <td width="11" rowspan="2">&nbsp;</td>
                   <td rowspan="2" valign="bottom"><img src="image/introduct_img_2.gif" width="139" height="93" /></td>
                   <td colspan="2" width="155" valign="bottom"><img src="image/main_75_2.gif" width="142" height="72" /></td>
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                 </tr>
                 <tr height="21">
                   <td valign="top"><img src="image/main_79_2.gif" width="110" height="21" /></td>
                   <td valign="bottom" width="45"><a href="#"><img src="image/more02.gif" border="0" /></a></td>
                 </tr>
                 <tr height="11">
                   <td></td>
                 </tr>
               </table>
               <table border="0" cellspacing="0" cellpadding="0" id="table_3" style="display:none">
                 <tr height="82">
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                   <td width="11" rowspan="2">&nbsp;</td>
                   <td rowspan="2" valign="bottom"><img src="image/introduct_img_3.gif" width="140" height="93" /></td>
                   <td colspan="2" width="155" valign="bottom"><img src="image/main_75_3.gif" width="142" height="72" /></td>
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                 </tr>
                 <tr height="21">
                   <td valign="top"><img src="image/main_79_3.gif" width="110" height="21" /></td>
                   <td valign="bottom" width="45"><a href="#"><img src="image/more02.gif" border="0" /></a></td>
                 </tr>
                 <tr height="11">
                   <td></td>
                 </tr>
               </table>
               <table border="0" cellspacing="0" cellpadding="0" id="table_4" style="display:none">
                 <tr height="82">
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                   <td width="11" rowspan="2">&nbsp;</td>
                   <td rowspan="2" valign="bottom"><img src="image/introduct_img_4.gif" width="140" height="93" /></td>
                   <td colspan="2" width="155" valign="bottom"><img src="image/main_75_4.gif" width="142" height="72" /></td>
                   <td width="1" bgcolor="#d9d9d9" rowspan="3" height="114"></td>
                 </tr>
                 <tr height="21">
                   <td valign="top"><img src="image/main_79_4.gif" width="110" height="21" /></td>
                   <td valign="bottom" width="45"><a href="#"><img src="image/more02.gif" border="0" /></a></td>
                 </tr>
                 <tr height="11">
                   <td></td>
                 </tr>
               </table>
             </td>
           </tr>
           <tr>
             <td colspan="5"><img src="image/line_bottom.gif" border="0" /></td>
           </tr>
           <tr height="22">
             <td></td>
           </tr>
         </table>
         <!-- /제품소개 -->

이 글은 스프링노트에서 작성되었습니다.