About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

การทำ Rollover Image (เปลี่ยนรูปภาพเมื่อ MouseOver) [Article ID : 109]


เรื่อง : การทำ 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

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



บทความอื่นที่คุณอาจสนใจ

สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor)

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver Web Page เราสามารถกำหนดจุด หรือตำแห...  

การติดตั้ง Extension (How to install extension)

เรื่อง : การติดตั้ง Extension ให้กับโปรแกรม Dreamweaver Dreamweaver Extension คือ โปรแกรมช่วยเสริมและขยา...  

การ Insert ไฟล์ Flash Video มาใช้กับเว็บ (FLV)

เรื่อง : การ Insert ไฟล์ Flash Video มาใช้งานกับเว็บเพจด้วย Dreamweaver Dreamweaver สามารถนำไฟล์ Media...  

การใช้ CSS กับโปรแกรม Dreamweaver CC

เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC CSS ย่อมาจาก Cascading Style Sheets ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*