마우스 이벤트로 이미지 롤오버를 표시하려면 다음 코드를 실행해 보십시오. -
예시
<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' 문은 이미지 객체의 존재를 확인합니다. 이미지 개체를 사용할 수 없는 경우 이 블록이 실행되지 않습니다.
- 이미지() 생성자는 image1이라는 새 이미지 개체를 만들고 미리 로드합니다. .
- src 속성에는 /images/html.gif라는 외부 이미지 파일의 이름이 할당됩니다.
- 마찬가지로 image2 개체를 만들고 이 개체에 /images/http.gif를 할당했습니다.
- #(해시 표시)는 클릭 시 브라우저가 URL로 이동하지 않도록 링크를 비활성화합니다. 이 링크는 이미지입니다.
- onMouseOver 이벤트 핸들러는 사용자의 마우스가 링크로 이동할 때 트리거되고 onMouseOut 이벤트 핸들러는 사용자의 마우스가 링크(이미지)에서 멀어질 때 트리거됩니다.