<form name="fo">
	<input type=text name="txt">
</form>

document.fo.txt.value = "값 입력" 
또는 
document.forms["fo"].txt = "값 입력"

document.images["이미지이름"].src = "images/이미지.jpg"

버젼4에서는 레이어 안에 form이나 image를 두고 이들을 다루는 경우가 많습니다. 이들 이미지나 폼이 페이지에 자신만 있으면 위의 방법으로 제어가 가능하지만, 이들이 레이어 안에 있다면 nn4에서 이들을 제어하기 위해서는 레이어의 경로를 같이 지정을 해야 접근할 수 있습니다.

ie4에서는 레이어는 이미지 같이 단순히 추가된 하나의 object입니다. 반면에 nn4에서의 레이어는 자신이 document를 가질수 있는 프레임과 비슷한 개념으로 사용됩니다. 즉, 다른 프레임에 있는 form이나 이미지를 제어하기 위해서 프레임 경로를 지정하는 것과 마찬가지로 레이어의 경로를 지정을 해야합니다.

이점에서 ie4와 nn4의 레이어에 대한 개념이 JavaScript1.2에서 두 브라우저의 가장 큰 차이점입니다.

<div id=D1 style="position:relative;">
<form name="fo">
 <input type="text" name="txt">
</form>
</div>

<script>
function inLayer() {
  if(n4) document.D1.document.fo.txt.value = "레이어 안의 폼 다루기"
  else if(e4) document.fo.txt.value = "레이어 안의 폼 다루기"
}
</script>

그래서 레이어 안에 이미지를 두고 이들 이미지를 다룰때 ie4, nn4에서 다 사용할 수 있게 절대 좌표의 레이어 안에 이미지를 둡니다. 사용할 레이어입니다. 페이지에 좌표 100, 100에 크기를 200으로 지정했습니다. 크기 200은 내용물이 200 보다 크다면 레이어의 크기는 자동으로 늘어납니다. 줄넘김을 할 수 있는 내용물은 줄넘김을 합니다. 위에서 200보다 크다면 이라고 했는데 nn4와 ie4에서 조금의 차이가 있습니다. nn4는 레이어가 가지고 있는 내용물과 레이어의 가장자리에 3px의 틈이 생깁니다. width-height-clip 을 참고하세요.

이 절대 좌표의 레이어에게 레이어가 가지고 있는 이미지를 다루기 위해서 지정한 이벤트입니다. 레이어안의 이미지들에게 mouseover, mouseout 두 이벤트를 지정하여 레이어 속의 이미지를 바꾸는 것입니다.

실행하기

레이어안의 두 이미지의 크기는 100입니다. 레이어의 크기도 200을 지정하였습니다. 이 경우는 두 이미지 사이에 공백이나 다른것이 없다면 정확히 맞습니다. 꽉차게 이미지를 레이어 안에 넣을수 있습니다. 하지만, nn4에서 border를 지정한 레이어는 레이어와 내용물의 사이에 사면에서 3px의 간격이 생겨서 두 번째의 이미지는 레이어의 크기인 200을 넘게 됩니다. 이 때, <nobr></nobr> 택으로 감싸주면 줄넘김을 하지 않습니다. 레이어의 크기와 줄넘김을 신경쓰지 않고 싶을 때 레이어의 내용물을 <nobr></nobr> 안에 넣어주면 됩니다. 레이어의 크기를 넘는 내용물은 줄넘김을 하지 않고 자동으로 늘어납니다.

close