Get Adobe Flash player

HTML : การใส่ลูกเล่นให้รูปภาพเปลี่ยนรูปเมื่อนำเมาส์ไปชี้

การใส่ลูกเล่นให้กับรูปภาพที่นำมาประกอบบนเว็บไซต์เป็นอีกหนึ่งในวิธีเพิ่มความน่าสนใจให้แก่เว็บไซต์ คราวนี้เราจะมานำเสนอการใส่รูปภาพที่มีลูกเล่น สามารถเปลี่ยนรูปได้เมื่อนำเมาส์ไปชี้ที่รูปภาพ และรูปจะเปลี่ยนกลับคืนเมื่อนำเมาส์ออกห่างจากรูป ซึ่งสามารถเขียนจากโค้ดได้ ดังนี้

<img src=”urlรูปภาพที่ 1” border=”0″
onmouseover=”this.src=’urlรูปภาพที่ 2‘;”
onmouseout=”this.src=’urlรูปภาพที่ 1‘;”
/>

ตัวอย่างการใส่โค้ด :

ในการนำรูปภาพมาใส่ลูกเล่น ให้นำ url รูปภาพมากำหนดให้กับค่า src ซึ่งจะต้องตรงกับ url ที่ใช้กับ onmouseout (ตามตัวอย่างใช้ไอคอนพื้นหลังสีฟ้า) ในขณะที่ url ที่ใช้กับ onmouseover จะกำหนดเป็นอีก url หนึ่ง (ตามตัวอย่างใช้ไอคอนพื้นหลังสีเขียว)

ซึ่งจะแสดงผลได้ดังนี้

  • ลักษณะรูปภาพในหน้าเว็บปกติ จะแสดงรูปที่ 1 (url รูปใน src และ onmouseout)

 

  • เมื่อนำเมาสืชี้ไปที่รูปภาพไอคอนที่เชตไว้ ลักษณะรูปภาพในหน้าเว็บจะเปลี่ยนเป็นรูปที่ 2 (onmouseover)

ทั้งนี้ หากผู้ใช้นำเมาส์ออกห่างจากพื้นที่ของรูปภาพ รูปภาพเดิมที่เซตไว้ก็จะกลับคืนมาเป็นหน้าเว็บไซต์ปกติ

Leave a Reply

Your email address will not be published. Required fields are marked *