7.4การแทรกปุ่มแบบRollover Image

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

         1. คลิกเมาส์เลือกตำแหน่งที่ต้องการวางรูปภาพ
         2. คลิกเลือกเครื่องมือ Rollover Image ซึ่งอยู่บน Insert bar อยู่ในกลุ่ม Common  จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมา
         3. ให้ทำการกำหนดตัวเลือกตามที่ต้องการ
              - Image name เป็นการตั้งชื่อให้กับรูปภาพ (ถ้าไม่ตั้งชื่อโปรแกรมจะมีให้แล้ว)
              - Original image กำหนดภาพแรกเป็นภาพแรกเมื่อแสดงผล โดยการกดปุ่ม Browse..
              - Rollover image กำหนดภาพที่สองซึ่งเป็นภาพที่แสดงผลเมื่อนำเมาส์ไปชี้บริเวณรูปภาพ โดยการกดปุ่ม Browse..
              - Preload rollover image เป็นการกำหนดให้รูปภาพที่สองโหลดไว้ล่วงหน้า (ควรจะต้องเลือกไว้)
              - Alternate text เป็นการใส่ข้อความอธิบายรูปภาพที่แทรกมา
              - When clicked, Go to URL เป็นการกำหนดจุดเชื่อมโยงให้กับรูปภาพ(ในกรณีที่ต้องการให้รูปภาพเป็นจุดเชื่อมโยง) ทำโดบคลิกปุ่ม Browse.. เลือกเว็บเพจที่ต้องการหรือทำการพิมพ์ URL ที่ต้องการ
          4. เมื่อกำหนดตัวเลือกที่ต้องการเรียบร้อยแล้ว กดปุ่ม OK จะได้ผลลัพธ์ดังรูป
   

       ผลลัพธ์จากการแสดงบนโปรแกรมเว็บบราวเซอร์ เมื่อนำเมาส์ไปชี้ที่รูปภาพ