Show-Hide Layers 클릭한 걸 기억하는 (by 알릭)

이온디

2009년 02월 03일

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
   <meta http-equiv=cache-control content=no-cache>
   <meta http-equiv=pragma   content=no-cache>

   
   <title>No title</title>

   
   

   

   <script type="text/javascript" language="javascript">
   //<![CDATA[
       var totalmenu = 3; //서브메뉴 총합
       function showmenu(no) {
           for(i=1;i<=totalmenu;i++) {
               if(i==no) {
                   document.getElementById('submenu_'+i).style.visibility = 'visible';
               } else {
                   document.getElementById('submenu_'+i).style.visibility = 'hidden';
               }
           }
       }

       function hidemenu() {
           for(i=1;i<=totalmenu;i++) {
                   document.getElementById('submenu_'+i).style.visibility = 'hidden';
           }
           initMenu();
       }

       function clickmenu(no) {
           createCookie('selectedmenu', no,100);
       }

       function checkMouse(e) {
           var openmenu = document.getElementById('menuarea');
           if (openmenu) {
               if (!e) var e = window.event;
               var tg = (window.event) ? e.srcElement : e.target;
               var obj = openmenu;
               while (tg && tg != obj && tg.nodeName != 'BODY') {
                   tg= tg.parentNode;
               }
               if (tg == obj) {
                   return;
               } else {
                   hidemenu();
               }
           }
       }

       function initMenu() {
           var cookieValue = readCookie('selectedmenu');
           if(cookieValue && cookieValue.length>0 && cookieValue<=totalmenu){
               showmenu(cookieValue);
           } else {
               showmenu(1);
           }
       }

       function createCookie(name,value,days) {
           if (days) {
               var date = new Date();
               date.setTime(date.getTime()+(days*24*60*60*1000));
               var expires = "; expires="+date.toGMTString();
           }
           else var expires = "";
           document.cookie = name+"="+value+expires+"; path=/";
       }

       function readCookie(name) {
           var nameEQ = name + "=";
           var ca = document.cookie.split(';');
           for(var i=0;i < ca.length;i++) {
               var c = ca[i];
               while (c.charAt(0)==' ') c = c.substring(1,c.length);
               if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
           }
           return null;
       }

       //
       function addEvent( obj, type, fn ) {
           if (obj.addEventListener) {
               obj.addEventListener( type, fn, false );
               EventCache.add(obj, type, fn);
           }
           else if (obj.attachEvent) {
               obj["e"+type+fn] = fn;
               obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
               obj.attachEvent( "on"+type, obj[type+fn] );
               EventCache.add(obj, type, fn);
           }
           else {
               obj["on"+type] = obj["e"+type+fn];
           }
       }

       var EventCache = function(){
           var listEvents = [];
           return {
               listEvents : listEvents,
               add : function(node, sEventName, fHandler){
                   listEvents.push(arguments);
               },
               flush : function(){
                   var i, item;
                   for(i = listEvents.length - 1; i >= 0; i = i - 1){
                       item = listEvents[i];
                       if(item[0].removeEventListener){
                           item[0].removeEventListener(item[1], item[2], item[3]);
                       };
                       if(item[1].substring(0, 2) != "on"){
                           item[1] = "on" + item[1];
                       };
                       if(item[0].detachEvent){
                           item[0].detachEvent(item[1], item[2]);
                       };
                       item[0][item[1]] = null;
                   };
               }
           };
       }();
       addEvent(window,'unload',EventCache.flush);
       //

       addEvent(window,'load',initMenu);
       addEvent(document,'mousemove',checkMouse);

       function eraseCookie(name) {
   createCookie(name,"",-1);
}

   //]]>
   </script>

   
   <style type="text/css">
   /*<![CDATA[*/
       body { font-size: 9pt;}
       #mainmenu { border:1px solid red; height: 20px; }
       #submenu { border:1px solid blue; height: 20px; }
       .submenus { position: absolute; visibility: hidden;}

       #submenu_1 { padding: 0;}
       #submenu_2 { padding: 0 0 0 52px;}
       #submenu_3 { padding: 0 0 0 104px;}
   /*]]>*/
   </style>

</head>

<body>
<div id="menuarea">
   <div id="mainmenu"><a href="#" onclick="clickmenu(1);" onmouseover="showmenu(1)">main 1</a> | <a href="#" onclick="clickmenu(2);" onmouseover="showmenu(2)">main 2</a> | <a href="#" onclick="clickmenu(3);"onmouseover="showmenu(3)">main 3</a></div>
   <div id="submenu">
       <div id="submenu_1" class="submenus"><a href="#" onclick="clickmenu(1);">sub 1-1</a> || <a href="#" onclick="clickmenu(1);">sub 1-2</a> || <a href="#" onclick="clickmenu(1);">sub 1-3</a></div>
       <div id="submenu_2" class="submenus"><a href="#" onclick="clickmenu(2);">sub 2-1</a> || <a href="#" onclick="clickmenu(2);">sub 2-2</a> || <a href="#" onclick="clickmenu(2);">sub 2-3</a></div>
       <div id="submenu_3" class="submenus"><a href="#" onclick="clickmenu(3);">sub 3-1</a> || <a href="#" onclick="clickmenu(3);">sub 3-2</a> || <a href="#" onclick="clickmenu(3);">sub 3-3</a></div>
   </div>
</div>
</body>
</html>

이온디

2010 년 11 월 18 일 (02:03)

<DIV align=left>

<BUTTON onclick="Engine_DIV.style.visibility='visible'">OPEN</BUTTON>

</DIV>

<DIV id=Engine_DIV style="VISIBILITY: visible; width: 550px; height: 200px; BORDER-RIGHT: #E8E8E8 1px solid; BORDER-TOP: #E8E8E8 1px solid; BORDER-LEFT: #E8E8E8 1px solid; BORDER-BOTTOM: #E8E8E8 1px solid; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; PADDING-BOTTOM: 5px">

<br><br><br><br><br><br><br><br><br>

<DIV align=right>

<BUTTON onclick="Engine_DIV.style.visibility='hidden'">CLOSE</BUTTON>

</DIV>

</DIV>
CLOSE

감추기(hidden) 형
답변 달기

홈페이지 제작팁

Show-Hide Layers 클릭한 걸 기억하는 (by 알릭)

Login