CSS Image Sprites
สไปรท์รูปภาพ
สไปรท์รูปภาพคือคอลเลกชั่นของรูปภาพที่ใส่เป็นรูปภาพเดียว
หน้าเว็บที่มีรูปภาพจำนวนมากอาจใช้เวลานานในการโหลดและสร้างคำขอเซิร์ฟเวอร์หลายรายการ
การใช้สไปรท์รูปภาพจะลดจำนวนคำขอของเซิร์ฟเวอร์และช่วยประหยัดแบนด์วิดท์
Image Sprite - ตัวอย่างง่ายๆ
แทนที่จะใช้ภาพแยกกันสามภาพ เราใช้ภาพเดียวนี้ ("img_navsprites.gif"):
ด้วย CSS เราสามารถแสดงเฉพาะส่วนของภาพที่เราต้องการได้
ในตัวอย่างต่อไปนี้ CSS ระบุว่าจะแสดงส่วนใดของรูปภาพ "img_navsprites.gif":
ตัวอย่าง
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
ตัวอย่างอธิบาย:
<img id="home" src="img_trans.gif">- กำหนดเฉพาะภาพที่โปร่งใสขนาดเล็กเท่านั้น เนื่องจากแอตทริบิวต์ src ต้องไม่ว่างเปล่า รูปภาพที่แสดงจะเป็นภาพพื้นหลังที่เราระบุใน CSSwidth: 46px; height: 44px;- กำหนดส่วนของภาพที่เราต้องการใช้background: url(img_navsprites.gif) 0 0;- กำหนดภาพพื้นหลังและตำแหน่ง (ซ้าย 0px, 0px บนสุด)
นี่เป็นวิธีที่ง่ายที่สุดในการใช้สไปรท์รูปภาพ ตอนนี้เราต้องการขยายโดยใช้ลิงก์และเอฟเฟกต์โฮเวอร์
Image Sprites - สร้างรายการการนำทาง
เราต้องการใช้ภาพต่อเรียง ("img_navsprites.gif") เพื่อสร้างรายการการนำทาง
เราจะใช้รายการ HTML เพราะมันสามารถเป็นลิงค์และยังรองรับภาพพื้นหลัง:
ตัวอย่าง
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif')
0 0;
}
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif')
-91px 0;
}
ตัวอย่างอธิบาย:
- #navlist {position:relative;} - ตำแหน่งถูกตั้งค่าให้สัมพันธ์กันเพื่อให้มีการวางตำแหน่งที่แน่นอนภายใน
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin และ padding ถูกตั้งค่าเป็น 0, list-style จะถูกลบออก และรายการทั้งหมดอยู่ในตำแหน่งแบบสัมบูรณ์
- #navlist li, #navlist a {height:44px;display:block;} - ความสูงของภาพทั้งหมดคือ 44px
ตอนนี้เริ่มจัดตำแหน่งและสไตล์สำหรับแต่ละส่วนเฉพาะ:
- #home {left:0px;width:46px;} - วางตำแหน่งไปทางซ้ายจนสุด และความกว้างของรูปภาพคือ 46px
- #home {background:url(img_navsprites.gif) 0 0;} - กำหนดภาพพื้นหลังและตำแหน่ง (ซ้าย 0px, 0px บนสุด)
- #prev {left:63px;width:43px;} - วางตำแหน่ง 63px ไปทางขวา (#home width 46px + ช่องว่างพิเศษระหว่างรายการ) และความกว้างคือ 43px
- #prev {background:url('img_navsprites.gif') -47px 0;} - กำหนดภาพพื้นหลัง 47px ทางด้านขวา (#home width 46px + 1px ตัวแบ่งบรรทัด)
- #next {left:129px;width:43px;}- ตำแหน่ง 129px ทางด้านขวา (จุดเริ่มต้นของ #prev คือ 63px + #prev ความกว้าง 43px + ช่องว่างเพิ่มเติม) และความกว้างคือ 43px
- #next {background:url('img_navsprites.gif') -91px 0;} - กำหนดภาพพื้นหลัง 91px ทางด้านขวา (#home width 46px + 1px ตัวแบ่งบรรทัด + #prev width 43px + 1px ตัวแบ่งบรรทัด )
สไปรท์รูปภาพ - เอฟเฟกต์โฮเวอร์
ตอนนี้เราต้องการเพิ่มเอฟเฟกต์โฮเวอร์ในรายการการนำทางของเรา
เคล็ดลับ:ตัว:hoverเลือกสามารถใช้ได้กับทุกองค์ประกอบ ไม่เฉพาะกับลิงก์เท่านั้น
รูปภาพใหม่ของเรา ("img_navsprites_hover.gif") ประกอบด้วยภาพการนำทางสามภาพและภาพสามภาพที่จะใช้สำหรับเอฟเฟกต์โฮเวอร์:
เนื่องจากนี่เป็นภาพเดียว ไม่ใช่ไฟล์แยกกัน 6 ไฟล์ จึงไม่มีการหน่วงเวลาในการโหลดเมื่อผู้ใช้วางเมาส์เหนือภาพ
เราเพิ่มโค้ดเพียงสามบรรทัดเพื่อเพิ่มเอฟเฟกต์โฮเวอร์:
ตัวอย่าง
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
}
ตัวอย่างอธิบาย:
- #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - สำหรับภาพโฮเวอร์ทั้งสามภาพ เราระบุตำแหน่งพื้นหลังเดียวกัน ห่างออกไปเพียง 45px