หากต้องการแสดงภาพเปลี่ยนเมื่อเลื่อนเมาส์ (image rollover) ด้วยเหตุการณ์เมาส์ ให้ลองรันโค้ดด้านล่าง:
ตัวอย่าง
<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>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จะตรวจสอบว่ามีออบเจ็กต์รูปภาพหรือไม่ หากไม่มี บล็อกนี้จะไม่ทำงาน - คอนสตรัคเตอร์ Image() สร้างและโหลดออบเจ็กต์รูปภาพใหม่ชื่อ image1 ล่วงหน้า
- คุณสมบัติ
srcถูกกำหนดเป็นชื่อไฟล์ภาพภายนอก/images/html.gif - สร้างออบเจ็กต์ image2 ขึ้นมาและกำหนด
/images/http.gifไว้ในออบเจ็กต์นี้ - เครื่องหมาย
#(hash mark) ปิดการทำงานของลิงก์ เพื่อไม่ให้เบราว์เซอร์พยายามไปยัง URL เมื่อคลิก ลิงก์นี้คือรูปภาพ - ตัวจัดการเหตุการณ์ onMouseOver จะทำงานเมื่อเมาส์ของผู้ใช้เลื่อนเข้ามาบนลิงก์ และ onMouseOut จะทำงานเมื่อเมาส์เลื่อนออกจากลิงก์ (รูปภาพ)
