[JAVA SCRIPT] Layer

Layer

1. Layer : 문서의 층을 구성하게 한다.

   Layer를 만드는 태그로 <LAYER>와 <DIV>가 있으나, 익스플로러에서는 <DIV>만 사용가능.

   레이어 자체에 색상을 지정하거나 투명으로도 지정할 수 있다

   ⓐ<DIV> - CSS 를 이용한 두가지 표현방식

   <STYLE>                                                     

      #이름 { position:absolute;}

   <STYLE>                                      ====>    <DIV style= "position:absolute;">

   <DIV id="이름">                                          <DIV>

   </DIV>

   ⓑ<LAYER> - 넷스케이프 전용

      <LAYER 속성="속성값></LAYER>

   ⓒ자바스크립트상의 표현

     익스플로러 :     document.all["레이어이름"].style.속성

     넷스케이프 :     document.layers["레이어이름"].속성

2. 속성

   .id  : 레이어 이름 지정

   .width, heigth : 레이어의 넓이, 높이

   .left, top         :문서에서 레이어까지의 좌측거리, 상단거리

   .backgroundColor       : 레이어의 배경색  (넷스케이프에선 bgcolor)

   .backgroundImage:url  : 레이어의 배경이미지 (넷스케이프에선 background)

   .visiblity   : 레이어의 숨김기능 (hidden/visible)

   .z-index   : 레이어의 순위. 숫자가 낮을수록 하단에 위치한 레이어임. 레이어가 하나이면 생략

   .clip        : 레이어의 일부만 보이게 지정 

                   rect(a b c d)명령과 함께 사용  a:좌측거리 b:a+보여줄 레이어영역의 너비

                                                              c:상단거리 d:c+보여줄 레이어영역의 높이

3. 넷스케이프 속성 (추가할 된것)

     .src  : 레이어에 불러올 HTML문서 지정

     .above, below : 해당 레이어보다 상위, 하위에 위치시킬 레이어 id 설정

         document.layers["layer1"].above == null 이면 layer1이 최상위레이어가 된다.

         document.layers["layer1"].below == null 이면 layer1이 최하위레이어가 된다. 

     .pagex, pageY :문서에서 레이저의 좌측거리, 상단거리

    

4. 메소드

    load("포함할 HTML파일", 레이어의 너비) : 레이어에 특정 HTML파일을 포함

    moveAbove("기준레이어") : 특정레이어를 기준으로 레이어의 위치를 위로 이동

    movebelow("기준레이어") : 특정레이어를 기준으로 레이어의 위치를 아래로 이동

    moveBy(x좌표값, y좌표값) : 레이어를 현재위치에서 지정한 만큼 위치를 이동

    moveTo(x좌표값, y좌표값) : 레이어를 기준좌표 위치에서 지정한 만큼 위치를 이동

                                            기준좌표는 상위레이어를 기준한다.

    moveToAbsolute(x좌표값, y좌표값) : 레이어를 document좌표에서 지정한 만큼 위치를 이동

    resizeBy(너비,높이) : 현재 레이어의 크기를 지정한 크기만큼 변경한다.

    resizeTo(너비,높이) : 현재 레이어의 크기를 지정한 크기로 변경한다.

5.이벤트핸들러

   onBlur, onFocus, onLoad, onMouseOut, onMouseOver