PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่าย

31 October 2009 By



การทำ 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=" " />





Tags:: sprite images css







URL สำหรับอ้างอิง