Rollover Image

เมนูกราฟิกแบบ Rollover Image เป็นเทคนิคหนึ่งที่นิยมใช้สำหรับเว็บ มีจุดเด่นคือ เมื่อนำเมาส์ไปวางไว้เหนือปุ่มกราฟิกที่กำหนด ปุ่มกราฟิกนั้นจะเปลี่ยนไปเป็นภาพอื่นๆ ตามที่กำหนดไว้ในโปรแกรม และเมื่อนำเมาส์เลื่อนออก ปุ่มกราฟิกนั้นก็จะคืนสู่สภาพเดิม ซึ่งโดยปกติการสร้างเมนูกราฟิกลักษณะนี้ จำเป็นจะต้องอาศัยภาษา Java หรือ JavaScript มาช่วย แต่โปรแกรม Dreamweaver อำนวยความสะดวกให้กับผู้ใช้ ดังนี้

• เตรียมภาพปุ่มกราฟิก รายการละ 2 ภาพ ภาพหนึ่งจะเป็นภาพต้นฉบับ อีกภาพจะเป็นภาพที่สามารถปรับเปลี่ยนได้ โดยควรมีขนาดเท่ากัน แต่แตกต่างกันเรื่องสี หรือ Effect โดยสามารถเข้าเว็บไซต์ http://www.buttongenerator.com เพื่อทำการสร้างปุ่มลักษณะต่างๆ

บันทึกรูปเก็บไว้ในโฟลเดอร์ที่เตรียมสำหรับสร้างเว็บ โดยคลิกปุ่มขวาเมาส์ที่รูปแล้วเลือกคำสั่ง Save Picture As… เมื่อบันทึกครบทุกปุ่มให้ย้อนกลับไปเพื่อเปลี่ยนลักษณะของปุ่มและตัวอักษร เพื่อสร้างปุ่มอีกชุด

• คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางภาพปุ่มกราฟิก
• คลิกเลือกเครื่องมือ Insert Rollover Image ในชุด Common

• ปรากฏหน้าต่างควบคุมการทำงาน ดังนี้

• กำหนดชื่อไฟล์ภาพที่เป็นภาพต้นฉบับ (ภาพแรก) ในรายการ Original Image
• กำหนดชื่อไฟล์ภาพที่สอง ในรายการ Rollover Image
• ระบุคำอธิบายภาพในรายการ Alternate text:
• กำหนดชื่อไฟล์ หรือชื่อเรียกเว็บไซต์ (URL) ในรายการ When Clicked, Go to URL:
• เมื่อกำหนดรายการต่างๆ ครบแล้วก็คลิกที่ปุ่ม OK