Dream 10 การสร้าง Interactive Image

Dreamweaver10

การสร้าง Interactive Image

            อินเทอร์แอ็คตีฟอิมเมจ ( Interactive Image) เป็นเทคนิคที่ทำให้รูปภาพธรรมดา มีชีวิตขึ้นมา เช่น สามารถเปลี่ยนรูปไปเป็นรูปได้เมื่อผู้ชมชี้ตัวมาที่รูปนั้น ซึ่งเรียกว่า โรลโอเวอร์ ( Rollover),หรือ ใช้รูปภาพนั้นเป็นจุดเชื่อมโยงไปยังที่ตีต่างๆ เมื่อผู้ชมคลิกที่รูปภาพนั้น ที่เรียกว่า ฮอดสปอด ( Hotspot ) และ อิมเมจแมป ( Image map ) เป็นต้น นอกจากนี้ยังไม่สามารถนำมาสร้างเป็นแถบปุ่มเพื่อให้ผู้ชมคลิกเลือกไปยังส่วนต่างๆ ที่เรียกว่า นาวิเกชั่นบาร์ ( Navigation Bar ) ได้อีกด้วย

สร้างอิมเมจแมป ( Image map )

            สร้างอิมเมจแมป ( Image map ) เป็นรูปภาพที่ถูกกำหนดให้บางส่วนของภาพนีสิ่งใดสิ่งหนังเกิดขึ้นเมื่อผู้ชมคลิกที่ส่วนนั้น พื้นที่ของส่วนที่ถูกกำหนดนี้ จะเรียกว่า ฮอดสปอด ( Hspot ) ซึ่งโดยทั่วไปแล้ว เรามักจะใช้ฮอดสปอดนี้ในการสร้างจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไซต์ต่างๆ

---------------------------รูป--------------------------------------------------

การกำหนดฮอดสปอด

1.   ในหน้าต่าง Document เลือกรูปภาพที่จะสร้างฮอดสปอด

2.     ขยายพาเนล Properties ให้เต็มขนาด ( 4 แถว )

3.     ในส่วนของ Map ตั้งซื่อให้กับอิมเมจแมปนี้หากมีหลายอิมเมจเดียวกัน ซื่อต้องไม่ช้ำกัน

4.      เลือกเครื่องมือในการสร้างฮอดสปอด ซึ่งอาจเป็น

----------------------------------รูป----------------------------------------------------------------

การสร้างฮอดสปอดรูปสี่เหลี่ยมและวงกลม

    เลือกเครื่องมือ

             Rectangle Hotspot tool หรือ Oval Hotspot tool ลากตัวชี้เพื่อทำการวาดฮอดสปอดบนส่วนของพื้นที่ของภาพที่ต้องการ

การสร้างฮอดสปอดรูปสามเหลี่ยม

      เลือกเครื่องมือ    Polygon Hotspot tool  คลิกเพื่อสร้างทางเดินของเส้น ให้ได้รูปที่ต้องการ

      คลิกที่เครื่องมือ  Pointer hotspot tool เพื่อปิดขอบเขต

5.  กำหนดค่าการเชื่อมโยงให้กับฮอดสปอด

---------------------------------รูป------------------------------------------

6. คลิกที่ว่างบนหน้าเว็บเพจ เมื่อเสร็จดูผลที่ได้ในเว็บบราวเซอร์

-----------------------รูป----------------------------------------------------

การแก้ไขอิมเมจแมป

     การเลือกฮอดสปอด
                  เลือกเครื่องมือ  Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการหากต้องการเลือกหลายๆ ฮอดสปอด ให้กดปุ่ม Shift ค้างไว้คลิกเลือกหากต้องการเลือกทั้งหมด ให้กดปุ่ม Ctrl+A

การเคลื่อนย้ายฮอดสปอด

1. เลือกเครื่องมือ—รูป-- Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2. ลากไปยังตำแหน่งที่ต้องการ หรือ กดปุ่มลูกศร เพื่อขยาบไปทีละ 1 พิกเซลกดปุ่ม Shift+ปุ่มลูกศร เพื่อเลื่อนไปทีละ 10 พิกเซล

การปรับขนาดฮอดสปอด

1.  เลือกเครื่องมือ Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2.  ลากจุดยึดของขอบเขตฮอดสปอดเพื่อปรับขนาดและรูปทรงของฮอดสปอด

การทำรูปภาพแบบโรลโอเวอร์ ( Rrollover image )

            การใส่เทคนิคโรลโอเวอร์ใหกับรูปภาพนั้น จะเป็นการกำหนดให้รูปภาพที่แสดงบนเว็บบราวเซอร์มีการเปลี่ยนแปลงรูปไปเป็นอีกรูปหนึ่งที่กำหนดไว้ได้เมื่อผู้ชมเลื่อนตัวชี้ของเมาส์มาวางบนรูปนั้น ดังนั้นการทำโรลโอเวอร์นี้ จะประกอบด้วยรูปภาพ 2 รูปเพื่อใช้สลับกันซึ่งภาพทั้งสองต้องมีขนาดเท่ากัน ซึ่งถ้าหากไม่เท่ากัน โปรแกรมก็จะทำการปรับให้เท่ากันโดยยึดภาพแรกเป็นหลัก ซึ่งอาจทำให้ภาพที่ถูกปรับขนาดเสียสัดส่วนของภาพไปได้รูปภาพแบบโรลโอเวอร์นี้จะถูกกำหนดด้วยอีเวนต์ onMouseOver และแอ็คชั่น Swap image โดยอัตโนมัติ