Dreamweaver CS

Swap image

เปลี่ยนภาพเมื่อเมาส์เลื่อนไปตามจุดที่กำหนด

เมื่อเลื่อนเมาส์เหนือรูปที่กำหนด จะแสดงรูปที่ใหญ่กว่าในอีกตำแหน่งหนึ่ง ดูตัวอย่างที่นี่

เริ่มต้น swap image1.ไปที่ Window > Behaviors จะมีหน้าต่างขึ้นมาดังรูป



หน้าต่างนี้ใช้สำหรับควบคุมการทำงานของ JavaScript ทั้งหมด

2.คลิกที่ปุ่ม จากนั้นไปที่ Show Event for > IE (6.0) ขั้นตอนนี้ทำเพื่อให้แสดงเฉพาะคำสั่งที่ใช้ได้สำหรับ IE 6.0 เท่านั้น

เนื่องจากว่าตอนนี้มี Browser มายมายแต่ที่นิยมมาสุดก็เห็นจะเป็น IE Internet Explorer ดังนั้นเราจึงต้องกำหนดให้ใช้คำสั่งที่สามารถแสดงผลใน IE เพื่อให้ผู้ชมส่วนใหญ่สามารถใช้งานได้

3.วางตำแหน่งของรูปตามต้องการ ตัวอย่างจะวางตำแหน่งรูปขนาดเล็กทางซ้ายมือ และรูปขนาดใหญ่ทางขวามือ

4.กำหนดชื่อให้กับรูป โดยรูปขนาดเล็กจะให้ชื่อว่า a,b,c,d,e ส่วนรูปใหญ่ให้ชื่อว่า big





5.เลือกรูป a จากนั้นคลิกที่ปุ่ม เลือก Swap image จะมีหน้าต่างดังรูป



มีรายละเอียดดังนี้

5.1 image ให้เลือกตำแหน่ง ของรูปที่ต้องการให้มีรูป a ขนาดใหญ่มาแทน ดังรูปเราจะให้แทนในตำแหน่งของ big

5.2 set source to เลือกรูปที่ต้องการให้มาแทน ในตัวอย่างจะเลือกรูปขนาดใหญ่ของ a

5.3 preload image ไม่ควรเลือกช่องนี้ เพราะจะทำให้โหลดภาพขยายของ a ด้วย ทำให้เว็บเพจโหลดได้ช้าลง ถ้าไม่เลือก ภาพขยาย จะถูกโหลดเมื่อเมาส์อยู่เหนือภาพ a

5.4 restore images onmouseout แสดงรูปปรกติเมื่อเคลื่อนเมาส์ออกจะรูป a

ทำแบบนี้ทุกรูปที่ต้องการแสดง

6.ในช่อง Behaviors จะสังเกตุว่าเป็นดังรูป



7.เราสามารถเลือกได้ว่าจะให้แสดงรูปเมื่อมีกิจกรรมอะไร ดังตัวอย่างให้แสดงรูปเมื่อมีเมาส์อยู่เหนือรูป onmouseover หรือจะให้แสดงรูปเมื่อคลิก onmousedown



ในบทต่อไปจะพูดถึงเรื่องกิจกรรมต่าง Behaviors ที่ใช้สำหรับ Javascript

เท่านี้เราก็สามารถสร้าง swap image ได้แล้ว


เลื่อนขึ้นด้านบน