Để hiển thị cuộn qua hình ảnh với sự kiện chuột, bạn có thể thử chạy mã sau -
Ví dụ
<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> Hãy xem những gì chúng ta đã sử dụng trong ví dụ trên để tự động hóa hoạt ảnh -
- Tại thời điểm tải trang này, câu lệnh "if" sẽ kiểm tra sự tồn tại của đối tượng hình ảnh. Nếu không có đối tượng hình ảnh, khối này sẽ không được thực thi.
- Hình ảnh () phương thức khởi tạo tạo và tải trước một đối tượng hình ảnh mới có tên là image1 .
- Thuộc tính src được gán cho tên của tệp hình ảnh bên ngoài có tên /images/html.gif.
- Tương tự, chúng tôi đã tạo một đối tượng image2 và gán /images/http.gif trong đối tượng này.
- # (dấu thăng) vô hiệu hóa liên kết để trình duyệt không cố truy cập URL khi được nhấp vào. Liên kết này là một hình ảnh.
- onMouseOver trình xử lý sự kiện được kích hoạt khi chuột của người dùng di chuyển vào liên kết và onMouseOut trình xử lý sự kiện được kích hoạt khi chuột của người dùng di chuyển khỏi liên kết (hình ảnh).