เขย่าภาพเมื่อเมาส์อยู่เหนือภาพ

ในบทนี้เราจะมาลองเขย่าภาพด้วย JavaScript กันดูเป็นเทคนิคแบบง่ายๆ แต่ทำให้เข้าใจการใช้งาน Behaviors ได้ดีขึ้น

เขย่าภาพด้วย JavaScript

1. เลือกภาพที่ต้องการเขย่า และตั้งชื่อ ดังตัวอย่างจะตั้งชื่อให้ภาพว่า imageshake



2. จากนั้นเลือกไปที่ window > behaviors หรือ Shift + F4 เพื่อเปิดหน้าต่าง Behaviors ขึ้นมาดังรูป



3. เลือกภาพที่ต้องการให้เขย่า จากนั้นคลิกที่ปุ่ม จะมีหน้าต่างดังนี้ขึ้นมา ให้เราเลือกที่ Effect > Shake



4. จะมีหน้าต่างขึ้นมาดังรูป ให้เลือกชื่อรูปที่ตั้งไว้ตั้งแต่หัวข้อที่ 1



5. เมื่อคลิก ok แล้วจะหน้าต่าง Behaviors จะเป็นดังรูป ให้เราเลือก onMouseOver เพื่อให้ภาพเขย่าเมื่อมีเมาส์อยู่เหนือภาพ



6. เปิดดูผลนี้ใน Browser จะเห็นว่าภาพของเราสามารถเขย่าได้เมื่อเรานำเมาส์ไปอยู่เหนือภาพ

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