การทำ Rollover Image

Rollover Image

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

ขั้นตอนการทำ

  • คลิก Cursor ให้อยู่ในตำแหน่งที่ต้องใส่ Rollover Image
  • กดปุ่ม Rollover ใน Object palette หรือที่เมนู Insert > Rollover Imag

จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้

  • Image Name ใส่ชื่อถ้าไม่ใส่ทางโปรแกรมจะกำหนดให้เป็น Image1 ,2,3,4…………
  • Original Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มก่อนที่เม้าส์จะลากผ่าน
  • Rollover Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มเวลาที่ลากเม้าส์ผ่าน
  • ใส่เครื่องหมายถูกหน้า Preload Rollover Image (เพื่อเป็นการ Load รูปภาพล่วงหน้าเพื่อให้การทำงานของ Rollover เป็นไปอย่างราบรื่น)
  • When Clicked, Go To URL ใส่ลิ้งค์ที่ต้องการให้เรียกขึ้นมาหลังจากที่คลิกปุ่มแล้ว
  • หลังจากเรียบร้อย คลิก OK แล้วจากนั้นให้ทำงานการทดสอบดูใน Browser  โดยการกดปุ่ม F12 เมื่อ Browser เปิดขึ้นมาให้ลองเลื่อนเมาส์ผ่านรูปดู

ให้นักเรียนลองทำดูนะคะ ไม่ยากเลยค่ะ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: