ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 마우스오버 레이어 상태 변경
    작업공간/Web Programming 2009. 9. 29. 01:09

    <html>
    <head>
    <title>메뉴 & 레이어</title>
    <style type="text/css">
    <!--
    table{border:solid 2px #ececec;}

    .base
    {
     font-size:10pt;
     color:black;
     background-color:white;
    }

    .base-turnover
    {
     font-size:10pt;
     color:white;
     background-color:red;
    }

    div
    {
     border:solid 0px #ececec;
     font-size:10pt;
     color:black;
     position:absolute;
     width:120;
     height:20;
     padding:2;
     visibility:hidden;
    }
    -->
    </style>

    <script language="javascript">
    <!--
     function baseRollOver(tbl_ID,state)
     {
     document.getElementById(tbl_ID).className=(state=='on')?'base-turnover':'base';
     }

    function MM_findObj(n, d) {
        var p,i,x; 
        if(!d) d = document;
        if( (p=n.indexOf("?"))>0 && parent.frames.length ) {
            d = parent.frames[n.substring(p+1)].document;
            n = n.substring(0,p);
        }
        if( !(x=d[n]) && d.all )
            x = d.all[n];
        for (i=0; !x&&i<d.forms.length; i++)
            x=d.forms[i][n];
        for(i=0; !x&&d.layers&&i<d.layers.length; i++)
            x=MM_findObj(n,d.layers[i].document);
        if(!x && d.getElementById)
            x=d.getElementById(n);
        return x;
    }

    function MM_showHideLayers() {
        var i,p,v,obj,args = MM_showHideLayers.arguments;
        for (i=0; i<(args.length-2); i+=3){
            if ( (obj=MM_findObj(args[i]))!=null ){
                v=args[i+2];
                if (obj.style) {
                    obj = obj.style;
                    v = (v=='show')?'visible':(v=='hide')?'hidden':v;
                }
            obj.visibility=v;
            }
        }
    }
    -->
    </script>
    </head>
    <body>
     <table border=0 cellpadding=3>
     <tr>
      <th width=5></th>
      <th class="base" id="menu1" onmouseover="baseRollOver('menu1','on');MM_showHideLayers('layer1','','show','layer2','','hide','layer3','','hide','layer4','','hide');"
       onmouseout="baseRollOver('menu1','off')" style=cursor:hand;>가입</th>
      <th width=5></th>
      <th class="base" id="menu2" onmouseover="baseRollOver('menu2','on');MM_showHideLayers('layer1','','hide','layer2','','show','layer3','','show','layer4','','hide');"
       onmouseout="baseRollOver('menu2','off')" style=cursor:hand;>커뮤니티</th>
      <th width=5></th>
      <th class="base" id="menu3" onmouseover="baseRollOver('menu3','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','show','layer4','','hide');"
       onmouseout="baseRollOver('menu3','off')" style=cursor:hand;>새소식</th>
      <th width=5></th>
      <th class="base" id="menu4" onmouseover="baseRollOver('menu4','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','hide','layer4','','show');"
       onmouseout="baseRollOver('menu4','off')" style=cursor:hand;
       onClick="location.href='http://www.nate.com'">링크</th>
      <th width=5></th>
     </tr>
     </table>
     <div id="layer1" style="left:25px; top:50px;" onmouseover="baseRollOver('layer1','on')"
      onmouseout="baseRollOver('layer1','off')">&nbsp;가입하러가기</div>
     <div id="layer2" style="left:76px; top:50px;" onmouseover="baseRollOver('layer2','on')"
      onmouseout="baseRollOver('layer2','off')">&nbsp;Q&A게시판</div>
     <div id="layer3" style="left:150px; top:50px;" onmouseover="baseRollOver('layer3','on')"
      onmouseout="baseRollOver('layer3','off')">&nbsp;자유게시판</div>
     <div id="layer4" style="left:210px; top:50px;" onmouseover="baseRollOver('layer4','on')"
      onmouseout="baseRollOver('layer4','off')">&nbsp;공지사항</div>
    </body>
    </html>



    댓글 0

Designed by Tistory.