문서에서의 엘레멘트 이동

DHTML로 전 스크린에 이미지를 애니메이션하거나 이동시킬 수 있다. 그 이미지나 엘레멘트 내용을 위치시키거나 이동시킬때 Netscape 4에서는 <layer> 테그의 left와 top 애트리뷰트를 사용하면 된다. Explorer 4에서는 같은 내용이 스타일 오브젝트의 pixelLeft와 pixelTop 특성의 값을 변경시킴으로서 가능하다. 여기서는 따로 따로 이해를 돕기 위해 예제는 Netscape 4와 Explorer 4를 별도로 처리하였다.

Netscape 4에서의 오브젝트 이동

Netscape 4에서 <layer> 테그의 left와 top 특성이 지원되는데, 왼쪽 맨위 꼭지점으로 부터의 거리(offset)를 제어 함으로서 달성 될 수 있다. 계산 공식을 스크립트에 넣음으로서 그 계산 결과에 따라 탄력적으로 이 layer를 이동시킬 수 있다. 아래 예제는 단추를 클릭하면 이미지를 수평으로 이동시킨다.

<layer name="imglay" left=128 top=400><img src="../gif/rfexample.gif">
</layer>

<script language="JavaScript1.2">
function moveit(){
  if (!document.layers){
    alert("이 예제는 Netscape 4 이상에서 표현됩니다.");
    return;
  }
  if (document.imglay.left<600) document.imglay.left+=5;
  moveid=setTimeout("moveit()",30);
}

function returnit(){
  if (!document.layers){
    alert("이 예제는 Netscape 4 이상에서 표현됩니다.");
    return;
  }
  clearTimeout(moveid);
  document.imglay.left=128;
}
</script>

<form method="post">
<p><b><input type="button" value="이동" name="imove" onclick="moveit()">
<input type="button" value="원위치" name="iback" onclick="returnit()"></b>
</p>
</form>

document.imglay.left가 오른쪽 한계에 도달 할 때까지 계속 5씩 증가시켜 이미지가 오른쪽으로 이동하게 하였다. '원위치'로서 시작 위치(document.imglay.left=128;)에 이미지를 가져다 놓았다.

Explorer 4에서의 오브젝트 이동

<div>에 인식자(id)를 주고 pixelLeft와 pixelTop 특성의 값을 변경하여 이미지를 이동시키는 예제는 Netscape에서와 유사하다.

<div id="imgdiv" style="position:relative"><img src="../gif/rfexample.gif">
</div>
<script>
function moveit2(){
  if (!document.all){
    alert("이 예제는 Explorer 4 이상에서 표현됩니다.");
    return;
  }
  if (imgdiv.style.pixelLeft<600) imgdiv.style.pixelLeft+=5;
  moveid2=setTimeout("moveit2()",30);
}

function returnit2(){
  if (!document.all){
    alert("이 예제는 Explorer 4 이상에서 표현됩니다.");
    return;
  }
  clearTimeout(moveid2);
  imgdiv.style.pixelLeft=0;
}
</script>

<form>
  <input type="button" value="이동" onclick="moveit2()">
  <input type="button" value="원위치" onclick="returnit2()">
</form>

imgdiv.style.pixelLeft가 오른쪽 한계에 도달 할 때까지 계속 5씩 증가시켜 이미지가 오른쪽으로 이동하게 하였다. '원위치'로서 시작 위치(imgdiv.style.pixelLeft=0;)에 이미지를 가져다 놓았다. <div id="imgdiv" style="position:absolute">로 설정 한다면 이에 맞게 수치들을 조정하여야 할 것이다.