วิธีสร้างปุ่ม Rollover บนเว็บเพจ


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

 

การสร้างปุ่ม Rollover

วิธีการสร้างปุ่ม Rollover บนเว็บเพจ มีขั้นตอนดังแสดงต่อไปนี้

1. คลิกวางเคอร์เซอร์ตรงตําแหน่ง ที่ต้องการจะสร้างปุ่ม Rollover

2. คลิกแท็บ Common ในหน้าต่าง Insert

3. คลิกปุ่ม Rollover Image จะปรากฏหน้าต่าง Insert Rollover Image ขึ้นมา

4. คลิกปุ่ม ที่ช่อง Original Image เพื่อกําหนดไฟล์รูปภาพก่อนวางเมาส์

5. คลิกปุ่ม ที่ช่อง Rollover Image

เพื่อกําหนดไฟล์รูปภาพที่จะให้เปลี่ยนเมื่อนําเมาส์วางบนปุ่ม

6. ใส่ชื่อเว็บเพจ หรือชื่อเว็บไซต์ที่ช่อง When Clicked, Go To URL: เพื่อกําหนดให้ลิงค์ไปเมื่อคลิกเมาส์

7. คลิกปุ่ม

8. กดปุ่ม <F 12 > เพื่อดูการแสดงผลผ่านทางบราวเซอร์

9. นําเมาส์ไปวางบนรูป จะสังเกตว่ารูปภาพเปลี่ยนไปเป็นอีกรูปหนึ่ง

10. คลิกที่รูปภาพ เพื่อลิงค์ไปยังหน้าเว็บเพจที่ ทําการลิงก์ไป ตามที่กําหนดไว้

 

คำสำคัญ (Tags): #dreamweaver
หมายเลขบันทึก: 94349เขียนเมื่อ 4 พฤษภาคม 2007 18:19 น. ()แก้ไขเมื่อ 23 มิถุนายน 2012 18:47 น. ()สัญญาอนุญาต: สงวนสิทธิ์ทุกประการจำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (2)

เว็บไม่แสดงการทำงานแบบปุ่ม rollover ทั้งๆที่ทำตามขั้นตอนข้างต้นแล้ว File ภาพก็เป็น Gif แล้ว เหมือนแทรกรูปภาพธรรมดา เป็นเพราะอะไร

ไม่ได้เหมือนกัน

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท