เขียน css ไม่ยากครับ ยากตอนระบุตำแหน่งภาพ คือถ้าเราทำรูปเอง เรารู้ขนาดรูปมันจะง่ายครับ หรือไม่ก็เอารูปไปวัดขนาดใน Photoshop ก่อน มันก็แค่การไล่ตำแหน่ง position ไปเร่ือย ๆ ตัวอย่าง
.sprite {background:url(../images/mySprite.png);} <<รูปที่ใช้
.monster {height:128px;} <<ความสูงของปุ่ม
.doctor {width:103px; background-position:
-2px -2px;} ปุ่มแรกความยาว 103 px
.octopus {width:89px; background-position:
-106px -2px;} ปุ่มสองความยาว 89px ไม่ต้องจนใจ ให้เอาขนาดภาพปุ่มแรก 103px+2px+1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สอง คือ 106px ในแนวแกน x
.wolf {width:115px; background-position:-
196px -2px;} เหมือนเดิม ปุ่มสามความยาว 115px ไม่ต้องจนใจ ให้เอาขนาดปุ่มที่สอง 89px + 106px +1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สาม คือ 196px ในแนวแกน x
.star {width:126px; background-position:-
312px -2px;} เหมือนเดิม ปุ่มสี่ความยาว 126px ไม่ต้องจนใจ ให้เอาขนาดปุ่มที่สาม 115px + 196px +1px (คือ stock ของรูปถ้ามี) จะเท่ากับตำแน่งของปุ่มที่สาม คือ 312px ในแนวแกน x
.dog {width:128px; background-position:-
439px -2px;}
ทีนี้ในไฟลื html ก้เรียกใช้กันได้ตามใจชอบ
<img src="images/transparent.gif" class="
sprite monster doctor" alt="Doctor Image" />
<img src="images/transparent.gif" class="
sprite monster octopus" alt="Octopus Image" />
<img src="images/transparent.gif" class="
sprite monster wolf" alt="Wolf Image" />
<img src="images/transparent.gif" class="
sprite monster star" alt="Star Image" />
ไปดูเต็ม ๆ กันได้ที่
http://cssglobe.com/post/3028/...ng-easy-and-useful-css-sprites 
พัฒนาเว็บไซต์
