โพสต์นี้จะสาธิตขั้นตอนการเปลี่ยนภาพที่โฮเวอร์ใน JavaScript
จะเปลี่ยนรูปภาพเมื่อโฮเวอร์ใน JavaScript ได้อย่างไร
สำหรับการเปลี่ยนภาพโฮเวอร์ ให้ใช้ปุ่ม “ บนเมาส์โอเวอร์ ' เหตุการณ์. เมื่อเลื่อนเมาส์/เคอร์เซอร์ผ่านองค์ประกอบ HTML หรือหนึ่งในองค์ประกอบย่อย เหตุการณ์ onmouseover จะถูกเรียกใช้งาน
ตัวอย่างที่ 1: เปลี่ยนรูปภาพเมื่อโฮเวอร์ใน JavaScript
ในไฟล์ HTML ให้ใช้แท็ก เพื่อแสดงรูปภาพบนหน้าเว็บ แนบ “ บนเมาส์โอเวอร์ ” เหตุการณ์ที่จะเรียกใช้ฟังก์ชัน JavaScript เมื่อเมาส์วางเหนือรูปภาพ:
< img รหัส = 'รูปเมนู' src = '1.jpg' บนเมาส์โอเวอร์ = 'เลื่อน(นี้);' />
ในไฟล์ JavaScript กำหนดฟังก์ชัน “ โฉบ ” กับพารามิเตอร์ “ img '. ในฟังก์ชันที่กำหนด ให้ตั้งค่าภาพที่จะแสดงบนโฮเวอร์:
การทำงาน โฉบ ( img )
{
img src = '2.jpg'
}
อย่างที่คุณเห็น ในเอาต์พุต เมื่อเราวางเมาส์เหนือภาพปัจจุบัน ภาพจะเปลี่ยนทันที:
ตัวอย่างที่ 2: สลับรูปภาพเมื่อโฮเวอร์
ในตัวอย่างข้างต้น รูปภาพจะเปลี่ยนไปเมื่อนำเมาส์ไปวางเหนือรูปภาพ และรูปภาพจะยังคงอยู่ ในตัวอย่างนี้ ภาพแรกจะปรากฏขึ้นอีกครั้งเมื่อเมาส์เคลื่อนออกจากภาพ เอฟเฟกต์นี้เรียกว่าเอฟเฟกต์การสลับ เพื่อจุดประสงค์นี้ เราจะใช้ “ บนเมาส์โอเวอร์ ' และ ' บนเมาส์เอาท์ ” คุณสมบัติ HTML:
< img รหัส = 'รูปเมนู' src = '1.jpg' บนเมาส์โอเวอร์ = 'เลื่อน(นี้);' บนเมาส์เอาท์ = 'hoverOut(นี้)' />
“ บนเมาส์โอเวอร์ ” เรียก “ โฮเวอร์ () ” ฟังก์ชั่น ในขณะที่การ “ บนเมาส์เอาท์ ” เหตุการณ์เรียกใช้ฟังก์ชัน “ hoverOut() ”:
การทำงาน เลื่อนออกไป ( img ) {img src = '1.jpg'
}
ผลลัพธ์แสดงว่ารูปภาพถูกเปลี่ยนสำเร็จเมื่อเมาส์อยู่เหนือรูปภาพ และจะเปลี่ยนไปเมื่อเมาส์ออกไปจากรูปภาพ:
นั่นคือทั้งหมดที่เกี่ยวกับภาพที่เปลี่ยนเมื่อโฮเวอร์
บทสรุป
สำหรับการเปลี่ยนภาพที่โฮเวอร์ ให้ใช้ปุ่ม “ บนเมาส์โอเวอร์ ' เหตุการณ์. สำหรับการสลับเอฟเฟกต์ ให้ใช้ปุ่ม “ บนเมาส์โอเวอร์ ” แอตทริบิวต์กับ “ บนเมาส์เอาท์ ' เหตุการณ์. เมื่อเลื่อนเมาส์/เคอร์เซอร์ผ่านองค์ประกอบหรือหนึ่งในองค์ประกอบย่อย เหตุการณ์ onmouseover จะถูกทริกเกอร์ ในขณะที่เมื่อเลื่อนเมาส์/ตัวชี้ออกจากองค์ประกอบ เหตุการณ์ onmouseout จะเกิดขึ้น ในโพสต์นี้ เราได้สาธิตขั้นตอนการเปลี่ยนภาพที่โฮเวอร์ใน JavaScript