เรื่อง : การทำ Rollover Image กับโปรแกรม Dreamweaver
หลายท่านคงเคยพบหรือเคยใช้งานเทคนิคที่เราเรียกกันว่า Rollover กันมาบ้างแล้ว กับบรรดาเว็บไซต์ต่าง ๆ
หรือถ้าท่านนึกไม่ออกว่าเทคนิคนี้แสดงผลอย่างไร ให้ท่านลองนำเมาท์ไปวางที่รูปภาพด้านล่างนี้ครับ
เมื่อเรานำเอาเมาท์ไปวางเหนือภาพที่ใช้เทคนิค Rollover นี้ รูปภาพจะเปลี่ยนไปเป็นอีกรูปหนึ่ง ซึ่งนี้คือการทำงานของ Rollover Image ครับ เรามาดูวิธีการทำกับบทความนี้กันครับ
วิธีการทำ Rollover Image
ก่อนที่จะไปทำ
Rollover Image นั้น ในเบื้องต้นเราต้องทำการจัดเตรียมไฟล์รูปภาพไว้จำนวน 2 ไฟล์ก่อนครับ เมื่อมีไฟล์รูปภาพแล้ว จากนั้นทำตามขั้นตอนต่างๆ ดังนี้
1. นำ Cursor ไปวางไว้ยังตำแหน่งหน้าเว็บพจที่ต้องการให้แสดง Rollover Image
2. จากนั้นไปที่
Insert -> Common แล้วเลือกที่
Image : Rollover Image ดังรูป
3. เมื่อเลือกดังข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เรากำหนดค่าต่าง ๆ ดังรูป
ที่หน้าต่าง
Insert Rollover Image ให้ทำการกำหนดค่า ดังนี้
-
Image name : Image1
*หรือชื่ออื่นตามต้องการ
-
Original image : เลือกรูปภาพที่จะแสดงก่อนมีเมาท์มาวางเหนือ
-
Rollover image : เลือกรูปภาพที่จะแสดงเมื่อมีเมาท์มาวางเหนือ
-
Alternate text : พิมพ์ข้อความอธิบายรูปภาพ
-
When clicked, Go to URL : เลือกไฟล์ หรือ URL ที่จะทำการ Link ไปเมื่อมีการกดที่รูปภาพ
4. เมื่อกำหนดค่าที่หน้าต่างในข้อ 3 ได้แล้วกดที่ OK เราก็จะได้รูปที่มี action เป็นแบบ Rollover Image ครับ ดังรูป
5. ทำการพรีวิวดูผลกับ Web Browser โดยการกดปุ่ม F12 ที่คีย์บอร์ด
เป็นอันเสร็จสิ้นการทำ Rollover Image ครับ อย่างไรก็ลองประยุกติ์ใช้งานกันดู...
About the Author
Mr.Sittichai Raksasuk
Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs.
He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.
Contact with him : dwthai@gmail.com
บทความอื่นที่คุณอาจสนใจ