Image Sprites

از موتو کد، دانشنامهٔ برنامه‌نویسی

یک image sprite مجموعه ای از تصاویر است که درون یک تصویر قرار گرفته‌اند.[۱]

مدت زمان بارگذاری یک صفحه وب با چندین عکس مکن است طولانی شود و چندین درخواست به سرور تولید ‌کند.

استفاده از image sprite ها موجب کاهش تعداد درخواست به سرور خواهد شد و در مصرف پهنای باند صرفه‌جویی می‌کند.

Image Sprites - مثال ساده[ویرایش | ویرایش]

به جای استفاده از سه تصویر جداگانه، می‌توانیم این تک تصویر را استفاده کنیم ("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"> - تنها یک تصویر شفاف (transparent) را تعریف می‌کند زیرا خاصیت src نمی‌تواند خالی باشد. تصویر نمایش داده شده،تصویر پس زمینه ای خواهد بود که در CSS مشخص می‌کنیم
  • width: 46px; height: 44px; - بخشی از تصویر را که می‌خواهیم استفاده کنیم تعریف می‌کند
  • background: url(img_navsprites.gif) 0 0; - تصویرر پس زمینه و موقعیت آن را مشخص می‌کند (سمت چپ 0px، بالا 0px)

این ساده‌ترین راه استفاده از image sprites است، حال می‌خواهیم این امر را با استفاده از لینک ها و حالت های hover (قرارگیری نشانه‌گر موس روی لینکها یا تصاویر) توسعه دهیم.

Image Sprites - ساخت یک لیست ناوبری (Navigation)[ویرایش | ویرایش]

می‌خواهیم از sprite image ("img_navsprites.gif") برای ساخت یک لیست navigation استفاده کنیم.

از یک لیست 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;} - ویژگی 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: 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: transparent url('img_navsprites_hover.gif') 0 -45px;} - برای هر سه تصویر hover، یک تصویر پس زمین یکسان در موقعیت یکسان، تنها 45px پایین‌تر مشخص کرده‌ایم.

منابع آموزشی[ویرایش]