เรื่อง การสร้าง 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 โดยอัตโนมัติ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น