บทช่วยสอนที่กระชับของ Dreamweaver 4 (8. เพิ่มเอฟเฟกต์แบบโต้ตอบให้กับหน้าเว็บ)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-30 18:35:37

8. เพิ่มเอฟเฟกต์แบบโต้ตอบให้กับหน้าเว็บ

สร้างเอฟเฟกต์แบบโต้ตอบที่เรียบง่าย

เรามักจะเห็นเอฟเฟกต์นี้บนหน้าเว็บ เมื่อเลื่อนเมาส์ไปเหนือรูปภาพ รูปภาพต้นฉบับจะสลับไปที่รูปภาพอื่น หลังจากเลื่อนเมาส์ออกไป รูปภาพจะกลับสู่ลักษณะเดิม ในตอนแรก ฉันพูดถึงข้อดีอย่างหนึ่งของ Dreamweaver เหนือ Frontpage คือ Dreamweaver สามารถสร้างเว็บเพจแบบโต้ตอบได้ ตอนนี้เราจะใช้ Dreamweaver เพื่อสร้างเอฟเฟกต์โต้ตอบที่ง่ายที่สุด - การเปลี่ยนรูปภาพ

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

คลิกที่แผงวัตถุ

คุณจะเห็นกล่องโต้ตอบต่อไปนี้:

1 ชื่อรูปภาพ: ชื่อแท็กของเอฟเฟกต์ภาพที่แปลงแล้ว Dreamweaver จะกำหนดให้โดยอัตโนมัติ

② รูปภาพต้นฉบับ: ระบุรูปภาพต้นฉบับ (เช่น นี่คือรูปภาพที่ยกขึ้น)

3 ภาพแบบโรลโอเวอร์: ระบุภาพหลังจากที่เลื่อนเมาส์ขึ้น (เช่น นี่คือภาพเว้า)

④ Url: URL ลิงก์ของรูปภาพ

ตัวอย่างเช่น หลังจากตั้งค่าตามที่แสดงด้านบนเสร็จแล้ว ให้กด OK จากนั้นกด F12 เพื่อดูตัวอย่างเอฟเฟกต์