Image Sprites
یک image sprite مجموعه ای از تصاویر است که درون یک تصویر قرار گرفتهاند.[۱]
مدت زمان بارگذاری یک صفحه وب با چندین عکس مکن است طولانی شود و چندین درخواست به سرور تولید کند.
استفاده از image sprite ها موجب کاهش تعداد درخواست به سرور خواهد شد و در مصرف پهنای باند صرفهجویی میکند.
محتویات
Image Sprites - مثال ساده
به جای استفاده از سه تصویر جداگانه، میتوانیم این تک تصویر را استفاده کنیم ("img_navsprites.gif"):
به کمک CSS، میتوانیم تنها بخشی از تصویر را که نیاز داریم نمایش دهیم.
در مثال زیر CSS مشخص میکند کدام بخش از تصویر "img_navsprites.gif" میبایست نمایش یابد:
توضیح مثال
<img id="home" src="img_trans.gif">
- تنها یک تصویر شفاف (به انگلیسی: transparent) را تعریف میکند زیرا خاصیت src نمیتواند خالی باشد. تصویر نمایش داده شده،تصویر پس زمینه ای خواهد بود که در CSS مشخص میکنیمwidth: 46px; height: 44px;
- بخشی از تصویر را که میخواهیم استفاده کنیم تعریف میکندbackground: url(img_navsprites.gif) 0 0;
- تصویرر پس زمینه و موقعیت آن را مشخص میکند (سمت چپ 0px، بالا 0px)
این سادهترین راه استفاده از image sprites است، حال میخواهیم این امر را با استفاده از لینک ها و حالت های hover (قرارگیری نشانهگر موس روی لینکها یا تصاویر) توسعه دهیم.
میخواهیم از sprite image ("img_navsprites.gif") برای ساخت یک لیست navigation استفاده کنیم.
از یک لیست HTML استفاده خواهیم کرد، زیرا میتواند از یک لینک باشد و همچنین از تصویر پس زمینه پشتیبانی کند:
توضیح مثال
- #navlist {position:relative;} - ویژگی position برابر با مقدار relative تنظیم شدهاست تا امکان موقعیت دهی مطلق در داخل آن را فراهم کند
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} و padding برابر با ۰ تنظیم شدهاند، ویژگی 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;} - رنگ تصویر پس زمینه و موقعیت آن را تعریف میکند
- #prev {left:63px;width:43px;} - موقعیت را روی 63px به سمت راست تنظیم میکند (اندازه عرض #home 46px + اندازه فضای خالی اضافی بین آیتمها) و عرض 43px است
- #prev {background:url('img_navsprites.gif') -47px 0;} - تصویر پس زمینه را در 46px سمت راست قرار میدهد (عرض #home 46px + 1px خط جداکننده)
- #next {left:129px;width:43px;} - 129px به سمت راست موقعیت دهی میکند (آغاز #prev 63px است + عرض #prev 43px + فضای خالی کافی) و عرض آن 43px است
- #next {background:url('img_navsprites.gif') -91px 0;} - تصویر پس زمینه را در 91px سمت راست قرار میدهد (عرض #home 46 پیکسل + 1px خط جداکننده + 43px عرض، #prev + 1px خط جداکننده)
Image Sprites - حالت Hover (قرار گیری نشانهگر موس روی لینک ها یا تصاویر)
حال میخواهیم حالت hover به منوی navigation خود اضافه کنیم.
نکته: انتخابگر :hover
را میتوان نه تنها روی لینکها، بلکه روی تمامی عناصر استفاده کرد.
تصویر جدید (”img_navsprites_hover.gif ") شامل سه تصویر navigation و سه تصویر مورد استفاده برای افکتهای hover میشود:
چون این یک تصویر است، و نه شش فایل جدا، هنگامی که کاربر روی تصویر، hover میکند هیچ تأخیری در بارگذاری وجود نخواهد داشت.
ما تنها سه خط کد برای اضافهکردن حالت hover اضافه میکنیم:
توضیح مثال:
#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - برای هر سه تصویر hover، یک تصویر پس زمین یکسان در موقعیت یکسان، تنها 45px پایینتر مشخص کردهایم.
منابع آموزشی