메뉴] 자바스크립트로 만든 메뉴 객체

자바스크립트로  메뉴관리 객체를 만들었음.

/*
 자바스크립트
 메뉴 Display  
 제작 윤지송 aseuka@hanmail.net
 2008.07.27
*/ 
  // 크기정보 변수
  function Size(_width, _height)
  {
   this.Width = _width;
   this.Height = _height;
   
   this.toString = function()
   {
    return "Width:("+this.Width.toString() +"), Height:("+this.Height.toString()+")"+"\n";
   }
   return this;
  }
  // 위치정보 변수
  function Point( x, y)
  {
   this.X = x;
   this.Y = y;

   this.toString = function()
   {
    return "X:("+this.X +"), Y:("+this.Y+")"+"\n";
   }
   return this;
  }

  // 단일 1개의 이미지 Icon 정보.
  function  imgIcon( path, _x, _y, _width, _height, _linkURL )
  {  
   this.ImgPath =  path;  
   this.ImgLoction =  new Point(_x, _y);
   this.ImgSize =  new Size( _width, _height );
   this.LinkURL    = _linkURL;

   this.toString = function()
   {
    var  returnString =  "Path  :" + this.ImgPath+"\n";
      returnString +=  "Loction :" + this.ImgLoction.toString();
      returnString +=  "Size  :" + this.ImgSize.toString();
    return returnString;
   }
   return this;
  }

  // Sub 메뉴Icon별 관리 객체.
  function ImgIcons( _name )
  {
  
   this.Name  = _name;
   this.imgs  = new Array();
   this.Add  = function( _path, _x, _y, _width, _height, _linkURL )
   {
    this.imgs[ this.imgs.length ] = new imgIcon( _path, _x, _y, _width, _height, _linkURL );           
   }
   this.toString = function()
   {
     var returnString  = "";
     for( i = 0; i < this.imgs.length ; i ++ )
     {      
      returnString += this.imgs[i].toString() + "|";
     }
     return returnString;
   }
   return this;
  }
/*
 //////////////////////////////////////////////////////////////////////////////////
*/

  // 메뉴 관리 하는 객체.
  function MenuList( _Id ,  _divName )
  {
   this.Id  = _Id;
   // 나타날 divId
   this.divName  = _divName;

   this.ar  = new Array();   
   this.Add  = function( imgIcons )
   {    
    this.ar[ this.ar.length ] = imgIcons;
   } 
   
   this.GetImgIcons = function( ArrayName )
   {       
    for( i = 0; i < this.ar.length; i++)
    {       
     if(this.ar[i].Name == ArrayName)
     {      
      return this.ar[i];
     }
    }
    return null;
   }

      this.MakeImg  =  function( imgIcon )
   {
    var  CreateImgHTML =  "<img src='" +imgIcon.ImgPath +"' ";
      CreateImgHTML += " style='width:"+imgIcon.ImgSize.Width +";";
      CreateImgHTML += " height:"+imgIcon.ImgSize.Height+ ";border:0;'";
      CreateImgHTML += " onmouseover='"+this.Id+".bImgMouseOver=true;'";
      CreateImgHTML += " onmouseout='"+this.Id+".MouseOut();'";
      CreateImgHTML += " >";

    var  AtagHTML   = "<a href='"+imgIcon.LinkURL+"' >" +  CreateImgHTML +"</a>";
      
    if( imgIcon.LinkURL )
    {
     return  AtagHTML;
    }
    else
    {
     return CreateImgHTML;
    } 
   }

   this.ClearLayer  =  function( )
   {         
    if(this.bImgMouseOver == false)
    {
     var div  = document.getElementById(this.divName);    
     div.innerHTML = ""; 
     div.style.display = "none";
    }
   }
   return this;
  }

  // 객체 속성 정의
  MenuList.prototype =    
  {Vertical: false // 가로(false) 세로(true)...
  ,
  TimerInterVal : 1000
  , 
  bImgMouseOver: false
  ,
  MouseOut :   function(){
       var fn_repeater = this.Id+".ClearLayer()";
       this.bImgMouseOver = false;
       this.tmID = setTimeout( fn_repeater , this.TimerInterVal );
      } 
  ,
  MouseOver:  function( img, arName ){

     var  strTagString = "";
     var  div  = document.getElementById(this.divName);

     this.bImgMouseOver = true;  
         
     var subMenuArray =  this.GetImgIcons(arName);
           
     if( subMenuArray && div )
     {   
      div.innerHTML  = "";
     
      
      for( i = 0 ; i < subMenuArray.imgs.length ; i++)
      {
       strTagString  += this.MakeImg( subMenuArray.imgs[i] );    
      }  
      
      if( img )
      {
       div.style.top = ((img.style.top ? img.style.top : 0) +  img.height + 10);   
       div.style.left = (img.style.left? img.style.left : 0);
       
       // 가로
       if( this.Vertical == false )
       {
        div.style.width  = img.width * subMenuArray.imgs.length;
        div.style.height = 0;
       }
       else
       {
        div.style.width  = img.width;
        div.style.height = img.height;
       }       
       div.style.zindex = 200;
       div.style.position  ='absolute';      
      }

      div.innerHTML  = strTagString;
      div.visibility = "show";
      div.style.display = "block";            
     } 
    }
   
  }; 

메뉴를 구현한 js 파일

MenuControl.zip