ทำRollover Image แบบไม่ง้อ javascript by

31
Aug
2

ปกติแล้วเวลาที่เราจะทำ 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!

2 ความเห็น

  1. Poet-guy
    21:23 on September 18th, 2009

    มุขทำปุ่มแบบนี้ผมก็เคยใช้นะ ^ ^
    ค้นพบด้วยความบังเอิญ ตอนที่ใส่รูปให้ปุ่มแล้วมันขึ้นไม่ครบทั้งรูป
    ส่วนจาวาสคริปต์ผมไม่ง้อแน่นอน……..
    เพราะเขียนไม่เป็นครับ = =” (เคยแต่โหลดมาแก้นิดหน่อย)

  2. Nutt
    20:33 on December 18th, 2011


    ทำรูป 2 รูป btn_customer กับ btn_customer_o

ใส่ความเห็น

RSS feed for comments on this post

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน