마우스 이벤트를 활용해 이미지 롤오버 효과를 구현하려면 아래 예제 코드를 참고하여 실행해 보세요.
예제
<html>
<head>
<title>Rollover with a Mouse Event</title>
<script>
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;" onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>코드 동작 원리 살펴보기
위 예제에서 애니메이션이 자동으로 작동하도록 만든 핵심 요소들을 하나씩 살펴보겠습니다.
- 페이지가 로드되는 시점에 'if' 문이 이미지 객체(document.images)의 존재 여부를 먼저 확인합니다. 이미지 객체를 지원하지 않는 환경이라면 해당 블록은 실행되지 않습니다.
- Image() 생성자는 image1이라는 새로운 이미지 객체를 생성하고 미리 로드(프리로드)합니다. 덕분에 마우스를 올리는 순간 이미지가 즉시 전환됩니다.
- src 속성에는 외부 이미지 파일인 /images/html.gif의 경로가 할당됩니다.
- 같은 방식으로 image2 객체를 생성하고 /images/http.gif 파일을 할당했습니다.
- href 값의 #(해시 기호)는 링크를 비활성화하는 역할을 하여, 클릭하더라도 브라우저가 다른 URL로 이동하지 않도록 합니다. 여기서 링크의 실체는 이미지입니다.
- onMouseOver 이벤트 핸들러는 사용자의 마우스가 링크(이미지) 위로 진입할 때 트리거되며, onMouseOut 이벤트 핸들러는 마우스가 링크에서 벗어날 때 트리거되어 원래 이미지로 되돌립니다.
참고: CSS만으로 더 간단하게 구현하기
단순히 마우스를 올렸을 때 이미지만 바꾸는 것이 목적이라면 JavaScript 없이 CSS의 :hover 가상 클래스를 활용하는 방법도 있습니다. 다만 마우스 오버·아웃 시점에 다른 요소를 함께 변경하거나 별도의 로직을 실행해야 한다면, 위 예제처럼 JavaScript 이벤트 핸들러를 사용하는 방식이 더 적합합니다.