ทำRollover Image แบบไม่ง้อ javascript by akara
Aug2
ปกติแล้วเวลาที่เราจะทำ rollover image เพื่อมาใช้ในเวปไซต์ของเราเนี่ย
เราก็มักจะใช้ javascript ในการทำใช่ไหมครับ
(ที่บอกว่าส่วนใหญ่ใช้วิธีนี้เพราัะว่ามันติดมากับโปรแกรม Dreamweaver ครับ)
ซึ่งจริงๆแล้วเราไม่จำเป็นต้องใช้วิธีนั้นเลยครับ ใช้แค่ CSS อย่างเดียวก็พอแล้ว
วิธีการก็ไม่ยากเลยครับ
รูปที่ใช้ button_1.gif ขนาด100x50px
รูปที่ใช้ตอน rollover button_1_over.gif ขนาดเท่ากัน
จากนั้น อันนี้คือส่วนของ css ครับ
a.image{
display:block;
width:100px;
height:50px;
background:url(‘button_1.gif’) no-repeat;
}
a.image:hover{
background:url(‘button_1_over.gif’) no-repeat;
}
แล้ว html เราก็แค่ใส่ class ให้ tag a เท่านั้นเองครับ
เห็นไหมครับไม่ยากเลย….
แต่เดี๋ยวก่อน! ผมยังมีของเด็ดกว่านี้อีก
คือ การใช้รูปเพียงรูปเดียวในการทำ rollover image
นี่คือไฟล์รูปครับ ลองคลิกขวาดูได้ครับ จะเห็นว่าเป็นรูปเดียว
ที่มีขนาด 100x105px
จากนั้นเรามาเปลี่ยน css กันซักหน่อยครับ เป็น
a.image_single{
display:block;
width:100px;
height:50px;
background:url(‘button_1_single.gif’) 0 0 no-repeat;
}
a.image_single:hover{
background:url(‘button_1_single.gif’) 0 -55px no-repeat;
}
รูปที่ทำจากวิธีนี้จะเป็นรูปด้านล่างนะครับ จะเห็นได้ว่าไม่แตกต่างกันเลย ประหยัดไปไฟล์นึงด้วยนะเอ้อ
edit @ 31 Aug 2009 19:30:15 by Akara_gat
Enjoy this article?
Consider subscribing to our RSS feed!
21:23 on September 18th, 2009
มุขทำปุ่มแบบนี้ผมก็เคยใช้นะ ^ ^
ค้นพบด้วยความบังเอิญ ตอนที่ใส่รูปให้ปุ่มแล้วมันขึ้นไม่ครบทั้งรูป
ส่วนจาวาสคริปต์ผมไม่ง้อแน่นอน……..
เพราะเขียนไม่เป็นครับ = =” (เคยแต่โหลดมาแก้นิดหน่อย)
20:33 on December 18th, 2011
ทำรูป 2 รูป btn_customer กับ btn_customer_o