Hiển thị hiệu ứng rollover hình ảnh bằng sự kiện chuột trong JavaScript

Để tạo hiệu ứng thay đổi hình ảnh khi di chuột qua (rollover), sử dụng các sự kiện onMouseOver và onMouseOut kết hợp với đối tượng Image() để tải trước hình ảnh.

Ví dụ

<html>
  <head>
    <title>Rollover with a Mouse Event</title>
    <script>
      <!--
        if (document.images) {
          var image1 = new Image();
          image1.src = "/images/html.gif";
          var image2 = new Image();
          image2.src = "/images/http.gif";
        }
      //-->
    </script>
  </head>
  <body>
    <p>Di chuột qua hình ảnh để xem kết quả</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>

Giải thích

• Kiểm tra document.images để đảm bảo trình duyệt hỗ trợ đối tượng Image.
• new Image() tạo và tải trước hình ảnh (preload).
• Thuộc tính src gán đường dẫn file hình ảnh.
• # vô hiệu hóa liên kết để không chuyển trang khi click.
• onMouseOver kích hoạt khi chuột vào liên kết; onMouseOut khi chuột rời đi.