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

ผู้เขียน

  1. นายบุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี



Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.