7. 동적인 변화(Dynamic Style)


7.2 위치 이동

  앞 절에서는 단순히 하나의 요소를 다른 요소로 대치하는 일을 했었는데, 지금부터 하고 싶은 일은 하나의 요소의 좌표를 마구 바꿔보는 것이다. 예를 들면, 그림을 드래그할 수도 있게 하는 것이다.

* 일단 이예제는 VBSCript로 작성된 스크립트코드를 가지고 있다.( Explorer4.0이상에 작동한다.) 중앙에 나타난 나비 그림을 드래그해보면 위치가 이동됩을 알 수 있을 것이다.

<SCRIPT LANGUAGE="VBScript">
dim oldx, oldy
function document_onMouseMove()
   dim srcElement, x, y, button
   button = window.event.button
   x = window.event.x
   y = window.event.y
   if (button = 1) then
     set srcElement = window.event.srcElement
     if srcElement.tagname="IMG" then
       if oldx = 0 then oldx = x
       if oldy = 0 then oldy = y
       srcElement.style.posLeft = srcElement.style.posLeft + (x - oldx)
       srcElement.style.posTop = srcElement.style.posTop + (y - oldy)
       oldx = x
       oldy = y
     end if
   end if
end function

function document_onDragStart()
window.event.returnValue = false
end function
</SCRIPT>
<img src="bfly1.gif" border="0" id="bbb"
style="position:absolute; TOP:200;LEFT:300; WIDTH:64px;HEIGHT:64px;ZINDEX:-1;">


  VBScript라 본인도 확실하게 아는 것은 아니지만, 그래도 이해를 돕기위해 중요한 부부만 살펴보자.

<SCRIPT LANGUAGE="VBScript"> VBScript임을 나타낸다.
function document_onMouseMove() 문서객체에서 발생되는 마우스움직에 반응하는 predefined 함수이다.
button = window.event.button window.event객체로 마우스에 달린 버튼이 뭐가 눌렸나 알 수 있다. 1값을 가지면 현재 왼쪽버튼이 눌린상태를 나타낸다.
srcElement = window.event.srcElement event를 발생시킨 객체를 받는다.
if srcElement.tagname="IMG" then 해당객체의 HTML TAG가 IMG인지 검사
srcElement.style.posLeft
srcElement.style.posTop
객체의 left, top의 좌표를 말한다.


  이렇게 이미지를 움직일 수 있는 것은 앞장에서 넷스케이프의 경우에는 Layer를 통해서 구현했었다.

    에니메이션   위와 같은 기능을 이용해서 그림이 마구 날라다니는 애니메이션을 만들 수 있다. setTimeout함수와 루틴을 합성하면 된다. 그러나 역시 고려해야 하는 것은 넷스케이프와 익스플로러가 서로 다른 문법을 사용해야 하기 때문에 두군데서 다 제대로 작성한다는 것은 어려운 일이다.
  다음장에서 부터는 익스플로러에서만 지원되는 Active X기술중에서 사용자가 쓰기에 적당한 기능 몇가지를 살펴보고자 한다. 지금까지 배운 DHTML만큼어렵지 않으니 도전해 보자.

- Last Update : 2001.7.2 by Deadfire(http://www.deadfire.net)

DHTML 강좌
DHTML이란?
CSS
     - CSS정의방법
     - 적용우선순위
     - 텍스트관련속성
     - 텍스트간의설정
     - 여백 지정하기
     - 테두리지정하기
     - 색상 지정하기
     - 기 타
CSS그룹핑
     - 스타일시트그룹
     - 클래스
     - 사용자지정스타일
JSSS
     - 새로추가된JSSS객체
     - JSSS와CSS간의비교
Layer
     - Layer Tag의사용
     - Layer 세부사항
     - Explorer용Layer
Javascript와연동
동적인 변화
     - 텍스트/이미지변환
     - 위치 이동
동적 테이블
     - 동적테이블생성
     - 동적테이블정렬
기 타
     - Font Download
     - Filter
마치며

Copyright ⓒ 1997 ~, Deadfire Program Master