layer 개체는 문서 속에 독립적으로 정밀하게 관리할 수 있는 투명하거나 투명하지 않은 HTML 블럭을 제공한다.
 |
Script |
[propVal=]..propName; |
| HTML |
propName="propVal">innerString |
- 특성
-
JavaScript의 기능성과 조합하여 탄력적으로 웹페이지를 움직이게 할 수 있으며 HTML 엘레맨트를 변경시킬수 있다.
layer 개체는 애니메이션, 이미지의 줌인/줌아웃(zoom in/out) 효과등 새로운 가능성을 제공한다.
- 생성
-
layer 개체는 HTML <LAYER> 혹은 <ILAYER> 태그로 생성된다.
<LAYER name="layerID">...</LAYER>
<ILAYER name="ilayerID">...</ILAYER>
- 구성
-
생성된 layer 개체들은 모체 document의 배열변수 layers에 zIndex 값이 큰 것부터 작은 것으로의 순서로 등록되고 관리된다. 가장 낮은 zIndex 값을 가진 layer 개체의 index 가 0되고 윗층에서 부터 보이는 순서로 정렬되는 것이다.
- 호출
-
HTML 태그로 정의된 name이나, 문서의 layer 개체들을 zIndex 순서에 입각한 배열변수의 인수(index)로 호출된다.
document.layers['layerID']
document.layers[index]
제일 먼저 나오는 layer 개체의 index는 0이고 최대 layer 개체의 index는 layer 개체의 갯수 -1이다.
설명을 위한 예제
| layer 내용 자식 SUP 내용뒤 형제 SPAN 내용 |
|
above 속성
- NS4 (
above="oVal"> 애트리뷰트)
⇒
zIndex 순서에서 해당
layer 개체가 맨 윗층이면
window 개체를 닫고, 아니면 호출하는 그
layer 개체의 윗층에
layer 개체를 참조한다. 위 예제를 참고하라.
문법: .above[=oVal]
background 속성
- NS4 (
background="sVal"> 애트리뷰트)
⇒
layer 개체의 배경이미지 주소를 반환하거나 지정하며, 배경이미지가 없으면 이 값은
null이 된다.
문법: .background.src[=urlVal]
코드: document.write(oObj.background);
결과:
below 속성
- NS4 (
below="oVal"> 애트리뷰트)
⇒
zIndex 순서에서 해당
layer 개체가 맨 아래층이면 이 값이
null이 되고, 아니면 호출하는 그
layer 개체의 아래층에
layer 개체를 참조한다.
문법: .below[=oVal]
bgColor 속성
- NS4 (
bgColor="colorVal"> 애트리뷰트)
⇒
layer 개체의 배경색상 지정하며,
'colorVal'는 rrggbb
색상이나 색상명칭이 된다.
document.
bgColor를 참고하라.
문법: .bgColor[=colorVal]
코드: document.write(oObj.bgColor);
결과:
clip(
개체) 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 개체이다.
그 밖의 것은 보이지 않는다.
문법: [oVal=].clip
clip.bottom 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 바닥 모서리를 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.bottom[=iVal]
clip.height 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 높이를 픽셀단위로 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.height[=iVal]
clip.left 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 왼쪽 모서리를 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.left[=iVal]
clip.right 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 오른쪽 모서리를 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.right[=iVal]
clip.top 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 위쪽 모서리를 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.top[=iVal]
clip.width 속성
- NS4
⇒
layer 개체의 보이는 지역 잘라내기(clip) 사각형의 너비를 픽셀단위로 반환하거나 설정한다.
그 밖의 것은 보이지 않는다.
문법: .clip.width[=iVal]
document(
개체) 속성
- NS4
⇒
layer 개체 속에 포함된 문서(
document)에 접속하며, 그
layer 개체 속 문서의 내용을 변경하기 위하여
document 개체의 모든
메서드들이 사용될 수 있다.
문법: .document
코드: document.write(oObj.document.location);
결과:
hidden 속성
- NS4 (
hidden="bVal"> 애트리뷰트)
⇒
layer 개체를 감추나 감추지 안을 것인가를 부울값으로 반환하거나 지정한다.
문법: .hidden[=true|false]
코드: document.write(oObj.hidden);
결과:
layers(
컬렉션) 속성
- NS4
⇒
layer 개체들의 배열변수를 참조한다.
문법: .layers[index]
left 속성
- NS4 (
left="iVal"> 애트리뷰트)
⇒
layer 개체에 상대적인 수평 위치를 픽셀단위로 반환하거나 지정한다.
문법: .left[=iVal]
코드: document.write(oObj.left);
결과:
length 속성
- NS4
⇒ 문서의 레이어 개체인 개체 배열변수(
layers)의 길이를 반환한다.
문법: [iVal=]layers.length
코드: document.write(document.layers.length)
name 속성
- NS4 (
name="sVal"> 애트리뷰트)
⇒ 설정된
layer 개체에 명칭을 문자열로 반환하거나 지정한다.
문법: .name[=sVal]
코드: document.write(oObj.name);
결과:
offset 속성
- NS4
⇒
layer 개체의 오프세트(offset)를 반환하거나 지정한다.
문법: .offset[=iVal]
pageX / pageY 속성
- NS4 (
pageX ="iVal">, (
pageY="iVal">애트리뷰트)
⇒
layer 개체를 포함하고 있는 페이지(문서)에 상대적으로
layer 개체의 수평 위치 좌표를
pageX는 수평,
pageY는 수직위치로 픽셀단위로 반환하거나 지정한다.
문법: .pageX[=iVal]
문법: .pageY[=iVal]
parentLayer 속성
- NS4
⇒
layer 개체가 네스팅(
layer 속의
layer)된 경우
layer 개체의 모체
layer 개체를 반환한다. 네스팅되어 있지 않으면 그
layer를 포함하는
window 개체를 참조한다.
문법: [oVal=].parentLayer
right 속성
- NS4 (
right="iVal"> 애트리뷰트)
⇒
layer 개체의 우측을 픽셀단위로 반환하거나 지정한다.
문법: .right[=iVal]
코드: document.write(oObj.right);
결과:
siblingAbove 속성
- NS4
⇒ 같은 모체
layer 개체 속에서 해당
layer 개체보다
zIndex 순서로 윗층에 있는
layer 개체를 반환한다. 존재하지 않으면 이 값은
null이된다.
문법: [oVal=].siblingAbove
siblingBelow 속성
- NS4
⇒ 같은 모체
layer 개체 속에서 해당
layer 개체보다
zIndex 순서로 아래층에 있는
layer 개체를 반환한다. 존재하지 않으면 이 값은
null이된다.
문법: [oVal=].siblingBelow
코드:
결과:
src 속성
- NS4 (
src="urlVal"> 애트리뷰트)
⇒
layer 개체에 포함되는 내용의 자원 주소(URL)를 문자열로 반환하거나 지정한다.
문법: .src[=urlVal]
코드: document.write(oObj.src);
결과:
top 속성
- NS4 (
top="iVal"> 애트리뷰트)
⇒
layer 개체에 상대적인 수직 위치를 픽셀단위로 반환하거나 지정한다.
문법: .top[=iVal]
코드: document.write(oObj.top);
결과:
visibility 속성
- NS4 (
visibility="sVal"> 애트리뷰트)
⇒
layer 개체가 보일 것인가(
show) 혹은 감출 것이가(
hide)를 반환하거나 설정한다.
문법: .visibilty[='show'|'hide'|'inherit']
코드: document.write(oObj.visibility);
결과:
zIndex 속성
- NS4 (
zIndex="iVal"> 애트리뷰트)
⇒ 지정된
layer 개체가 다른
layer 개체들과 상대적으로 윗층에 보일 것인가를 나타내는
zIndex를 반환하거나 지정한다. 지정된
layer 개체의
zIndex보다 높은 값이면 그
layer 개체는 아래층에, 낮은 값이면 윗층에 보이게 된다.
문법: .zIndex[=iVal]
코드: document.write(oObj.zIndex);
결과:
window(개체) 속성
- NS4
⇒
layer개체가 네스팅되었던 안되었던 관계없이
layer개체를 포함하는
window 개체나
frame 개체이다.
문법: [oVal=].window
코드: document.write(oObj.window);
x/y 속성
- NS4 (
x="iVal">,
y="iVal"> 애트리뷰트)
⇒
layer 개체의 좌측변으로부터의 위치(x)나 맨윗면으로부터의 위치(y)를 픽셀단위로 반환하거나 지정한다.
문법: .x[=iVal]
문법: .y[=iVal]
코드: document.write(oObj.x+' | '+oObj.y);
결과:
captureEvents 메서드
- NS4
⇒ 특정 종류의 모든 이벤트를 포착하도록 지시한다.
이벤트 목록을 참고하라.
문법: .captureEvent(eventType)
handleEvent 메서드
- NS4
⇒
layer 개체에서 지정된 이벤트를 위한 처리자를 호출한다 .
문법: .handleEvent('event')
load 메서드
- NS4
⇒ HTML 코드 파일을 새로 읽어
layer 개체의 내용을 변경시킨다.
문법: .load('fileName',width)
코드:
결과:
moveAbove 메서드
- NS4
⇒
layerName 인수로 지정된
layer 개체 윗층로 이동시킨다.
문법: .moveAbove(layerName)
moveBelow 메서드
- NS4
⇒
layerName 인수로 지정된
layer 개체 아래층로 이동시킨다.
문법: .moveBelow(layerName)
moveBy 메서드
- NS4
⇒ 현재 좌표에서
layer 개체를 상대적인 위치로 지정된 픽셀수만큼 좌표를 이동시킨다.
horizPixels은 수평으로
vertPixels은 수평으로의 이동이다.
문법: .moveBy(horizPixels,vertPixels)
moveTo 메서드
- NS4
⇒
layer 개체의 절대 위치 좌표를 맨위 왼쪽 모서리로부터의 픽셀 단위 거리로
Xposition은 수평 좌표,
Yposition은 수직 좌표로 다시 설정하여 이동시킨다.
문법: .moveTo(Xposition,Yposition)
moveToAbsolute 메서드
- NS4
⇒ 지정된
layer 개체의 절대 위치 좌표를 문서에는 상대적으로 맨위 왼쪽 모서리로부터의 픽셀 단위 거리로
xCoord은 수평 좌표,
YCoord은 수직 좌표로 다시 설정하여 이동시킨다. 이는 모체
layer 개체에서는 반대가 된다.
문법: .moveToAbsolute(xCoord,yCoord)
releaseEvents 메서드
- NS4
⇒
layer개체의 어떤 지정된 타입(
eventType)의 캡쳐되어 이벤트를 해제하고 이벤트 개체의 하부 체계로 보낸다.
문법: .releaseEvents('eventType')
resizeBy 메서드
- NS4
⇒
layer 개체의 크기를 절대 크기 픽셀단위로 다시 지정한다.
horizPixels은 너비이고,
vertPixels는 높이이다.
문법: .resizeBy(horizPixels,vertPixels)
resizeTo 메서드
- NS4
⇒
layer 개체의 외부 크기를 상대 대크기 픽셀단위로 다시 지정한다.
outerWidth,은 너비이고,
outerHeight는 높이이다.
문법: .resizeTo(outerWidth,outerHeight)
routeEvent 메서드
- NS4
⇒ 캡쳐된 이벤트를 윈도우 이벤트체계 밑에 추가한다.
이벤트를 윈도우(문서나 layer) 원래 개체에 전달하는데, 목표 개체가 윈도우의 하층개체이면 그 하층개체에 전달한다.
문법: .routeEvent(eventType)
onblur 이벤트처리자
- NS
⇒
layer 개체에서
blur(초점 잃음) 이벤트가 발생되면 지정된
JsCode를 수행한다.
문법: .onblur='JsCode'
onfocus 이벤트처리자
- NS
⇒
layer 개체에서
focus(초점 받음) 이벤트가 발생되면 지정된
JsCode를 수행한다.
문법: .onfocus='JsCode'
onload 이벤트처리자
- NS
⇒ 윈도우가
layer 개체를 완전히 읽었을 때(로드가 완료되었을 때) 지정된
JsCode 코드를 수행한다.
문법: .onload='JsCode'
onmousedown 이벤트처리자
- NS
⇒
layer 개체에서
onMouseDown(단추 누름) 이벤트가 발생되면 지정된
JsCode를 수행한다.
문법: .onmousedown='JsCode'
onmouseover 이벤트처리자
- NS
⇒
layer 개체에서
onMouseUp(단추 누름을 해제) 이벤트가 발생되면 지정된
JsCode를 수행한다.
문법: .onmouseover='JsCode'