자바스크립 예제(4)

  

마우스 이벤트

 

 

마지막으로 다루어 볼 예제는 마우스가 특정 지역으로 이동하면 그림이 바뀌는 것입니다. 아마도 이와 같은 기능을 가진 페이지를 많이 접해 보셨을 것입니다. 또한 자신의 홈페이지에 가장 먼저 추가하고 싶은 기능이기도 할 것입니다. 먼저 코드를 봅시다.

 

<html><head>

<SCRIPT LANGUAGE="JavaScript">

 

menu1 = new Image();

menu1.src = "menu-1.GIF";

 

menu2 = new Image();

menu2.src = "menu-2.GIF";

 

bmenu1 = new Image();

bmenu1.src = "bmenu-1.GIF";

 

bmenu2 = new Image();

bmenu2.src = "bmenu-2.GIF";

 

function hiLite(imgDocID,imgObjName) {

document.images[imgDocID].src = eval(imgObjName + ".src")

}

 

</script></head>

 

<body>

<a href="menu-1.htm" onMouseOver="hiLite('doc_menu1','menu1')"

onMouseOut="hiLite('doc_menu1','bmenu1')">

<img name="doc_menu1" src="bmenu-1.GIF" border=0></a>

<a href="menu-2.htm" onMouseOver="hiLite('doc_menu2','menu2')"

onMouseOut="hiLite('doc_menu2','bmenu2')">

<img name="doc_menu2" src="bmenu-2.GIF" border=0></a>

</body>

</html>

 

독자분들께서 이 스크립트를 실행하기 위해서는 우선 두개의 이미지와 그 이미지들 위로 마우스 커서가 놓여졌을 때 바뀔 이미지들 두개, 총 네개의 이미지가 필요합니다. 그리고 그 이미지를 클릭했을 때 해당 페이지로 이동할 수 있도록 견본 html 화일 두 개도 준비해야 합니다.

 

이제 코드를 분석해 봅시다. 자바 스크립트에서 이미지를 처리하는 방법은 배열 선언과 비슷합니다.

단지 다음과 같이 써 주면 이미지 변수가 선언됩니다.

 

my_image = new Image();

 

이미지 변수를 선언했으면 다음과 같이 src를 이용하여 이미지 변수에 실제 이미지 화일을 할당합니다.

 

my_image.src = "image file name" ;

 

위의 예제에서는 평상시의 이미지 두 개와 마우스 커서가 놓여졌을 때의 이미지 두 개를 지정했습니다.

즉, menu-1.GIF와 menu-2.GIF 화일이 마우스 커서가 놓여졌을 때의 이미지들이고 bmenu-1.GIF와 bmenu-2.GIF 화일이 평상시의 이미지들입니다.

그리고 a 태그에서 마우스 커서가 놓여졌을 때와 마우스 커서가 다른 곳으로 갔을 때 서로 다른 파라미터로 hiLite 함수를 호출하여 이미지를 바꾸게 합니다. 물론 img 태그의 name은 hiLite 함수의 첫번째 파라미터와 같아야 하고 src는 평상시의 이미지 화일 이름입니다.