마우스 오버시 나타나고 사라지는 테이블들

출처 bad design|배드걸

마우스 오버시 나타나고 사라지는 테이블들

메인페이지에서  공지사항/FAQ 라는 탭을 누르면 그아래 해당되는 테이블이 나타나게 할때

흔히 사용됨

 

<SCRIPT language=JavaScript>
     <!--
      function img_select1(){
       document.notice.src="../img/main_news_on.gif";
       document.faq.src="../img/main_faq_off.gif";
       select_1.style.display='';
       select_2.style.display='none';
      }

      function img_select2(){
       document.notice.src="../img/main_news_off.gif";
       document.faq.src="../img/main_on.gif";
       select_1.style.display='none';
       select_2.style.display='';
      }
     //-->
</SCRIPT>

<!--  위스크립트를 바디 위에 삽입 -->

<img src="../img/main_news1.gif" width="94" height="17" onmouseover=img_select1() name=notice>
<img src="../img/main_faq2.gif" width="56" height="17" onmouseover=img_select2() name=faq>
<!--  마우스 오버될 이미지들 -->

<SPAN id=select_1>
    <table width="336" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="10" height="25">news</td>
                    </tr>
    </table>
    </span>

    <SPAN id=select_2 style="DISPLAY: none">
    <table width="336" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="10" height="25">faq</td>
                    </tr>
    </table>

</span>

<!--  마우스 오버되면 나타나는 영역들-->

 

 

 

../img/main_news_on.gif <- 마우스 오버시 나타나는 버튼1
../img/main_news_off.gif <- 마우스 아웃시 나타나는 버튼1

../img/main_faq_on.gif <- 마우스 오버시 나타나는 버튼2
../img/main_faq_off.gif <- 마우스 아웃시 나타나는 버튼3