تصاویر اسپریت (Image Sprites)
«تصویر اسپریت (Image Sprite)» یعنی چند آیکن کوچک در یک تصویر بزرگ. این کار تعداد «درخواست سرور (Server Request)» را کم می کند. پس صفحه زودتر می آید؛ مثل برگه ای که چند مهر رویش چاپ شده، نه چند برگ جدا.
نمایش بخش دلخواه از تصویر اسپریت
با «پس زمینه-تصویر (background-image)» عکس اسپریت را می گذاریم. سپس با «موقعیت پس زمینه (background-position)» فقط قسمتِ لازم را نشان می دهیم.
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: 0 0;
}
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0;
}
#next {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1" />
<img id="prev" src="img_trans.gif" width="1" height="1" />
<img id="next" src="img_trans.gif" width="1" height="1" />
</body>
</html>
چطور مختصات را پیدا کنیم؟
هر آیکن عرض و ارتفاع دارد. با جمعِ عرض ها و فاصله ها، مقدار X منفی را می نویسیم. سپس ردیف را با مقدار Y جابه جا می کنیم.
اسپریت در فهرست ناوبری
می توانیم همان تصویر اسپریت را روی آیتم های لیست بگذاریم. جای هر آیکن دقیق تنظیم می شود.
#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: 60px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 120px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
گام های عملی
- یک تصویر اسپریت بساز یا بردار.
- ابعاد هر آیکن را اندازه بگیر.
- روی عنصر هدف، background-image بگذار.
- با background-position بخش درست را نشان بده.
- در صورت نیاز، جای عناصر را تنظیم کن.
افکت هاور با اسپریت
برای حالت هاور، فریم های هاور را در همان اسپریت بگذار. سپس فقط مختصات پس زمینه را تغییر بده.
#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;
}
نکته: چون همه فریم ها در یک فایل است، هاور سریع می آید و تاخیر ندارد.
مطالب مرتبط: گالری تصاویر، طراحی واکنش گرا، و منوهای کشویی.
جمع بندی سریع
- اسپریت، چند آیکن در یک تصویر است.
- درخواست ها و حجم کم تر می شود.
- مکانِ آیکن با background-position مشخص می شود.
- هاور فقط مختصات را جابه جا می کند.
- اندازه گیری دقیق، نتیجه تمیز می دهد.