เมนูกราฟิกแบบ 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