ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย
หน้าแรก CSS ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย
การทำ CSS Sprite Images ช่วยลดจำนวน HTTP Requests ตัวอย่าง กรณีเรามีปุ่มที่เป็นรูปภาพอยู่ 3 อัน
เมื่อมีการเรียกหน้าเพจนั้น ก็จะมีการเรียก HTTP Requests เท่ากับ 3 ตามจำนวนของรูป เป็นต้น
บางกรณีการทำ CSS Sprite ยังช่วยลดขนาดของไฟล์ได้อีกด้วย ทำให้การโหลดหน้าเว็บเพจเร็วขึ้น
การทำ CSS Sprite Images เป็นเทคนิคการรวมไฟล์รูปภาพหลายๆ รูปเป็นรูปเดียว แล้วกำหนดการนำมาแสดง
โดยใช้เป็น Backgroud แล้วระบุตำแหน่งของแต่ละรูป เรียกใช้ผ่าน css class (div.class) หรือ css selector (div#selector)
ตัวอย่าง รูปที่รวมกันแล้ว
ผลลัพธิ์การทำ CSS Sprite Images
CSS code ตัวอย่าง
<style type="text/css">
input.iSubmit,input.iSend,input.iClear{
padding:0;margin:0;border:0;border-collapse:collapse;cursor:pointer;
}
input.iSend{
width:65px;height:20px;
background:url(demo/images/css_bt_sprite.png) -1px -1px;
}
input.iSubmit{
width:65px;height:20px;
background:url(demo/images/css_bt_sprite.png) -1px -23px;
}
input.iClear{
width:65px;height:20px;
background:url(demo/images/css_bt_sprite.png) -1px -45px;
}
</style>
HTML code
<input name="button" type="submit" class="iSubmit" id="button" value=" " /> <input name="button2" type="reset" class="iClear" id="button2" value=" " /> <input name="button3" type="button" class="iSend" id="button3" value=" " />
ขึ้นไปด้านบน