Dreamweaver CS

Rollover Image

สลับภาพเมื่อนำเมาส์ไปว่างเหนือภาพ

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

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

Rollover Image

1. เลือกตำแหน่งที่ต้องการสร้าง rollover image

2. ไปที่ Insert > Image Objects > Rollover Image จะมีหน้าต่างดังรูป



มีรายละเอียดดังนี้

image name ใส่ชื่อของรูป

original image ใส่ภาพที่ต้องการให้แสดงผล

rollover image ใส่ภาพที่ต้องการให้แสดงผลเมื่อเมาส์อยู่เหนือ

preload rollover image ถ้าเราเลือกช่องนี้ เมื่อผู้ใช้โหลดเว็บเพจครั้งแรกจะโหลดภาพ original , rollover ด้วย แต่ถ้าไม่เลือกช่องนี้ rollover image จะถูกโหลดเมื่อเมาส์อยู่เหนือ original image ทำให้การแสดงผล rollover imageช้าลง

alternate text คำที่แสดงเมื่อกำลังโหลดรูป หรือไม่สามารถโหลดรูปได้

Go to url ใส่ปลายทางที่ต้องการให้ลิงค์ไป

3. คลิก ok เท่านี้ก็สามารถทำ rollover image ได้แล้ว


เลื่อนขึ้นด้านบน