|
เมนูกราฟิกแบบ
Rollover Image เป็นเทคนิคหนึ่งที่นิยมใช้สำหรับเว็บเทคนิคหนึ่ง
เนื่องจากมีจุดเด่นคือ เมื่อนำเมาส์ไปวางไว้เหนือปุ่มกราฟิกที่กำหนด
ปุ่มกราฟิกนั้นจะเปลี่ยนไปเป็นภาพอื่นๆ ตามที่กำหนดไว้ในโปรแกรม
และเมื่อนำเมาส์เลื่อนออกจากปุ่มกราฟิก ปุ่มกราฟิกนั้นก็จะคืนสู่สภาพเดิม
ซึ่งโดยปกติการสร้างเมนูกราฟิกลักษณะนี้ จำเป็นจะต้องอาศัยภาษา
Java หรือ JavaScript มาช่วย แต่โปรแกรม Dreamweaver อำนวยความสะดวกให้กับผู้ใช้
ตัวอย่างของ
Rollover Image
ภาพที่ 1
 ภาพที่ 2
ตัวอย่าง Rollover ลองเอาเมาส์มาชี้ดูสิครับ
- เตรียมภาพปุ่มกราฟิก
รายการละ 2 ภาพ ภาพหนึ่งจะเป็นภาพต้นฉบับ อีกภาพจะเป็นภาพที่สามารถปรับเปลี่ยนได้
โดยควรมีขนาดเท่ากัน แต่แตกต่างกันเรื่องสี หรือ Effect
- คลิกเมาส์
ณ ตำแหน่งที่ต้องการวางภาพปุ่มกราฟิก
- คลิกเลือกเครื่องมือ
Insert Rollover Image
จากแถบ Object
- ปรากฏหน้าต่างควบคุมการทำงาน
ดังนี้
- กำหนดชื่อไฟล์ภาพที่เป็นภาพต้นฉบับ
(ภาพแรก) ในรายการ Original Image
- กำหนดชื่อไฟล์ภาพที่สอง
ในรายการ Rollover Image โดยคลิกที่ปุ่ม Browse แล้วเลือกไฟล์ภาพที่ต้องการ
จากนั้นจึงคลิกปุ่ม Select
- กำหนดชื่อไฟล์
หรือชื่อเรียกเว็บไซต์ (URL) ในรายการ When Clicked, Go to
URL:
- เมื่อกำหนดรายการต่างๆ
ครบแล้วก็คลิกที่ปุ่ม OK
|
