การทำ Rollover Image (เปลี่ยนรูปภาพเมื่อ MouseOver) [Article ID : 109]

ก่อนที่จะไปทำ Rollover Image นั้น ในเบื้องต้นเราต้องทำการจัดเตรียมไฟล์รูปภาพไว้จำนวน 2 ไฟล์ก่อนครับ เมื่อมีไฟล์รูปภาพแล้ว จากนั้นทำตามขั้นตอนต่างๆ ดังนี้

1. นำ Cursor ไปวางไว้ยังตำแหน่งหน้าเว็บพจที่ต้องการให้แสดง Rollover Image
2. จากนั้นไปที่ Insert -> Common แล้วเลือกที่ Image : Rollover Image ดังรูป
3. เมื่อเลือกดังข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เรากำหนดค่าต่าง ๆ ดังรูป ที่หน้าต่าง Insert Rollover Image ให้ทำการกำหนดค่า ดังนี้
- Image name : Image1 *หรือชื่ออื่นตามต้องการ
- Original image : เลือกรูปภาพที่จะแสดงก่อนมีเมาท์มาวางเหนือ
- Rollover image : เลือกรูปภาพที่จะแสดงเมื่อมีเมาท์มาวางเหนือ
- Alternate text : พิมพ์ข้อความอธิบายรูปภาพ
- When clicked, Go to URL : เลือกไฟล์ หรือ URL ที่จะทำการ Link ไปเมื่อมีการกดที่รูปภาพ

4. เมื่อกำหนดค่าที่หน้าต่างในข้อ 3 ได้แล้วกดที่ OK เราก็จะได้รูปที่มี action เป็นแบบ Rollover Image ครับ ดังรูป 5. ทำการพรีวิวดูผลกับ Web Browser โดยการกดปุ่ม F12 ที่คีย์บอร์ด