앞 절에서는 단순히 하나의 요소를 다른 요소로 대치하는 일을 했었는데,
지금부터 하고 싶은 일은 하나의 요소의 좌표를 마구 바꿔보는 것이다. 예를 들면,
그림을 드래그할 수도 있게 하는 것이다.
* 일단 이예제는 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를 통해서 구현했었다.
다음장에서 부터는 익스플로러에서만 지원되는 Active X기술중에서 사용자가 쓰기에 적당한 기능
몇가지를 살펴보고자 한다. 지금까지 배운 DHTML만큼어렵지 않으니 도전해 보자.
DHTML이란?
동적인 변화