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