การสร้างการเชื่อมโยง

เทคนิคการสร้างภาพลิงค์แบบ Rollover Image

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

1 เลือกตำแหน่งที่จะวางภาพ

2 เลือกที่เมนู Insert->Image Objects->Rollover Image หรือคลิกปุ่ม

Rollover Image ที่แท็บ Common เลือกใช้เครื่องมือ

ที่ Property Inspector เพื่อสร้าง Map Link ในที่นี้เลือกที่

เพื่อสร้างพื้นที่สี่เหลี่ยม

          3 จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมา สำหรับกำหนดภาพแบบ Rollover Image ได้ดังนี้
                 Image name : ตั้งชื่อภาพ Rollover Image นี้
                 Original Image : คลิกปุ่ม Browse... แล้วเลือกไฟล์ภาพแรก
                 Rollover Image : คลิกปุ่ม Browse... แล้วเลือกไฟล์ภาพที่สอง
                 Preload rollover Image : คลิกที่ตัวเลือกนี้เพื่อให้มีการโหลดภาพทั้งสองมาไว้ล่วงหน้า เพื่อจะได้แสดงภาพที่สองเมื่อมีการเลื่อนเมาส์ไปวางเหนือภาพแรกได้อย่างรวดเร็ว
                 Alternate text : พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเรานำเมาส์ไปวางที่ภาพนี้
                 When clicked, Go to URL : กำหนดไฟล์เว็บเพจที่จะเชื่อมโยง เมื่อเราคลิกส์เมาส์ที่ภาพ โดยคลิกที่ปุ่ม Browse... เพื่อเข้าไปเลือกไฟล์เว็บเพจที่ต้องการ หรือพิมพ์ URL ลงไปได้เลย
                 คลิกปุ่ม OK เพื่อตกลงการสร้าง Rollover Image

4 แสดงภาพแรกที่เรากำหนดการใช้งานแบบ Rollover Image ซึ่งจะถูกจัดวางบนหน้าเว็บที่เรากำหนดไว้

ให้เราสั่งบันทึกหน้าเว็บ และกดปุ่ม <F12> เพื่อทดสอบดูผลลัพธ์ในบราวเซอร์ เมื่อเราคลิกที่บริเวณสี่เหลี่ยม บนภาพตรงคำว่า "ปราสาทหินพนมรุ้ง" ที่เป็นลิงค์ จะเปิดหน้าเว็บ panomrung.html ขึ้นมา

Note ภาพแรกและภาพที่สองที่ประกอบกันเป็น Rollover Image ควรมีขนาดเท่ากัน ถ้าภาพทั้งสองมีขนาดไม่เท่ากันแล้ว เมื่อทดสอบผ่านบราวเซอร์ภาพที่ได้จะดูเหลื่อมกัน เนื่องจาก Dreamweaver จะปรับภาพทั้งสองให้มีขนาดเท่ากัน ดังนั้นเราควรตกแต่งภาพทั้งสอง ให้มีขนาดเท่ากันก่อนนำมาสร้างเป็นภาพแบบ Rollover Image