Oh!!!!!! อ่านไปอ่านมา โถถถถถถถถถ....เราเคยเขียน css มาก่อนแล้ว แต่เมื่อก่อนไม่รู้ว่าเขาเรียก CSS Sprites เพราะเจ้านายญี่ปุ่นสอนเทคนิคการเขียนเว็บให้ save HTTP requests (โง่อีกแล้วเรา ทำไมถึงไม่รู้ว่าเขาเรียก CSS Sprites นะ) เอาเป็นว่ามาดู Code กันเลยดีกว่า
มารู้กันก่อนว่าเราทำไมถึงต้องเขียน CSS Sprites ขึ้นมา เป็นเพราะมันช่วยลด HTTP requests ได้เป็นอย่างดีเลยเชียวล่ะ เวลาคุณโหลดเว็บหนึ่งตัวคุณจะใช้เวลา 5% ถึง 38% เอง ไม่งั้นคุณจะต้องใช้เวลาโหลด 62%-95% ของหน้าเว็บนั้น ๆ โอ้วๆๆมันชั่งใช้เวลาที่แตกต่างกันโดยสิ้นเชิง ดูตัวอย่างกันเลย....
ขั้นตอนแรก คุณต้องดูโครงสร้างเว็บของคุณก่อนว่า องค์ประกอบที่เป็นภาพที่คุณคิดว่ามันควรจะอยู่ในหมวดหมู่เดียวกันหรือสามารถใช้ CSS หลัก ๆ เหมือนกันได้ วันนี้ขอยกตัวอย่าง List ก็แล้วกัน
ปกติแล้ว ถ้าเราเห็นรูปที่เป็น icon แบบนี้ เราจะตัดรูปเป็นชิ้น ๆ แต่การเขียน css แบบนี้ เราจะไม่ตัดรูปออกเป็นชิ้นเด็ดขาด เราจะตัดให้เป็นรูปเดียวกันหมด ดังรูป
/*-----Code CSS------*/
#nav li {
list-style-type:none;
font-size:2em;
}
#nav li a {
background-image:url('../img/image_nav.gif');
background-repeat:no-repeat;
padding:18px 90px;
line-height:80px;
}
#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover।item1 {background-position:0px -72px;}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
#nav li a.item3 {background-position:0px -287px;}
#nav li a:hover.item3 {background-position:0px -359px;}
#nav li a.item4 {background-position:0px -431px;}
#nav li a:hover.item4 {background-position:0px -503px;}
#nav li a.item5 {background-position:0px -575px;}
#nav li a:hover.item5 {background-position:0px -647px;}
<ul id="nav">
<li><a class="item1" href="#" title="Link 1">Item 1</a></li>
<li><a class="item2" href="#" title="Link 2">Item 2</a></li>
<li><a class="item3" href="#" title="Link 3">Item 3</a></li>
<li><a class="item4" href="#" title="Link 4">Item 4</a></li>
<li><a class="item5" href="#" title="Link 5">Item 5</a></li>
</ul>
ดูแรก ๆ แล้วอาจจะงงนะ แต่ต้องค่อย ๆ เข้าใจในเรื่องแกน x กับ y
อธิบาย Code หลัก ๆ กันดีกว่า
1. #nav li เราจะกำหนดในเรื่อง type ของ list ซะก่อน
2. #nav li a ในเมนูของเราทุกตัวต้องเป็นลิงค์ ดังนั้น เราจะให้ลิงค์ทุกตัวมีภาพ
3. มาถึง class ของแต่ละตัวเลย เมื่อ #nav เป็น li และมีลิงค์ <a> เรียก class ชื่อว่า item[เลข] ดังนั้น เราไม่จำเป็นที่จะต้องเรียก bg อีกรอบ เราสามารถกำหนด position ของ bg นั้น ๆ ได้เลย เพราะเราได้เรียกรูปภาพตั้งแต่ #nav li a (ข้อที่2)ดังนั้น
List ที่ 1 ต้องมี position เป็น 0 และ 0 เมื่อเรานำเมาส์ไป hover ที่ List เราต้องเปลี่ยนภาพ ดังนั้นเราจึงตั้ง position เป็น 0 และ -72px position 0 ตัวแรกคือแนวนอน ส่วน positon -72px คือแนวตั้ง ทำไมถึง -72px เพราะ 72px เป็นความสูงของรูป เราติดลบเพราะต้องการให้รูปขยับขึ้นข้างบน ดังนั้นเมื่อเมาส์ไป over รูปจะเปลี่ยนทันที
List ที่ 2 position ที่ยังไม่ hover ทำไมถึงเป็น 0 กับ -143px ค่าของ 143px มาจาก 72+71 และเมื่อ hover ค่าตัวเลขก็จะเปลี่ยนไปอีก ก็คือนำ 72+71+72 ก็จะได้ 215 ดังนั้นการคำนวณ position ของรูปก็เป็นสิ่งสำคัญ และปัจจัยอีกอย่างก็คือ การตัดรูปภาพ ถ้าอยากจะให้ง่ายขึ้น คุณควรจะตัดรูปภาพให้มีขนาดของความสูงเท่ากัน และไม่ต้องมีระยะห่างของรูปก็ได้ จะทำให้เราคำนวณได้ง่ายขึ้นอีกเยอะ
