พอเปิดไฟล์ตัวอย่างเมพ (
โหลดข้างบน) มาดู
เลยนึกได้ว่าวันนี้ลืมพูดไปเรื่องนึง
คือเรื่องที่กูเกิ้ลเขาใช้ไฟล์ภาพไฟล์เดียว แต่เอามาแบ่งการแสดงผลเป็นหลายๆ ส่วน
เอามาทำปุ่มเวลาปกติและเวลา hover เพื่อลดภาระในการโหลดไฟล์หลายๆ ไฟล์ครับ
หลักการคือสร้างก้อนอะไรสักก้อนที่ระบุความกว้าง/ความสูงไว้
แล้วก็ใช้ background (ที่ขนาดใหญ่เกินพื้นที่ที่ว่า)
โดยกำหนด position ในการแสดงผล มันก็จะถูกคัดมาแสดงแค่บางส่วนของภาพ
เราเรียกมันว่า
Sprite ยังไงดูได้จาก
http://delicious.com/iannnnn/spriteเทคนิคนี้จะช่วยตอบคำถามเรื่องเว็บกากนั่น(พูดด้วยความริษยา)ให้บุ๋มกะกวางที่ถามมาจ้ะ
ดูตัวอย่างได้ที่นี่ 
เอาเมาส์ลองชี้ๆ ตรงโลโก้ตัวนี้แหละจ้ะ มันจะเปลี่ยนรูปได้
อันนี้โค้ด HTML
<a href="#">
<span class="test"></span>
</a>
ส่วนอันนี้ CSS
a span.test {
display:block;
width:90px;
height:40px;
background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat 0 0;
}
a:hover span.test {
background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat -85px 0;
}
เห็นไหมว่าหลักการคือ
- กำหนดความกว้างความยาวของ span (หรือก้อน div ก็แล้วแต่ถนัด) เอาไว้
- ใช้ background image ที่ใหญ่กว่าขอบเขตที่กำหนดเป็นพื้นที่ของปุ่ม
- ใช้การกำหนดพิกัดของภาพที่นำมาแสดง ทั้ง a ธรรมดา และ a:hover
ส่วนอันนี้คือภาพที่เอามาหั่นเป็น Sprite ของกูเกิ้ลเขา -->
เดี๋ยวเอาไปแปะในจู๋ CSS เด็ดๆ ด้วยล่ะ
