ต่อไป »

[kenessar]

มันทำยากครับ เว็บทั่วไปใช้แบบธรรมดาก็พอแล้ว แต่สำหรับเว็บที่ต้องการความเร็วเป็นพิเศษ อย่างพี่จีจี หรือ เว็บเบราเซอร์เกมส์ อันนี้มันจะใช้ Sprite แบบนี้แหละครับ โหลดครั้งเดียว
เวลาเขียนโปรแกรมเกมส์ ปกติแล้วเขาก็ใช้ Sprite เหมือนกันครับ กะพิกเซลต้องแม่น คือ ต้องวัดมาอย่างดี

[Hikkie]

เทคนิคนี้ชื่อ css sprite ครับ

ช่วยลด header ที่เกิดขึ้นได้ ผลลัพท์คือเว็บเร็วขึ้น แต่ถ้าเว็บเราเบาอยู่แล้วก็ไม่ต้องซีเรียสอะไรมากทำแบบปกติของเราไปก็ได้

คือทุก ๆ รูปที่เปิดเว็บใหม่ครั้งแรกขึ้นมา มันจะต้องร้องขอไปที่ server ใหม่ทุกครั้ง มีรูป 10 ไฟล์ ก็ไปร้องขอที่ server 10 ครั้ง

ถ้าเราใช้เทคนิค css sprite มันก็อาจร้องขอไฟล์รูปไฟล์เดียวที่ใหญ่หน่อย แต่เป็นการร้องขอแค่ครั้งเดียวจบใช้ทั้งเว็บ เว็บเราก็จะเร็วขึ้น

แต่มีข้อจำกัดไม่สามารถทำกับการ repeat รูปซ้ำ ๆ ได้ครับ

ดูตัวอย่าง yahoo ครับจะเห็นภาพชัด

http://shopping.yahoo.com/
http://l.yimg.com/a/i/us/sh/gr...rite_primary_colors_043009.png

[solitary99]

เขียน 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