اسپریت عکس (Image Sprites) در CSS

اسپریت تصویر در CSS

یک اسپریت تصویر، یک مجموعه از تصاویر است که در یک تصویر تکی قرار گرفته اند. اگر یک صفحه ی وب، تعداد زیادی تصویر داشته باشد، لود شدن این تصاویر زمان زیادی می برد، و درخواست های زیادی از سرور را تولید می کند. با استفاده از اسپریت های تصویر، تعداد درخواست ها به سرور کاهش می یابد و در پهنای باند(bandwidth) صرفه جویی می شود.

یک مثال ساده از اسپریت های تصویر

به جای استفاده از سه تصویر مختلف، ما از تصویر زیر (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 نمی تواند خالی باشد. این تصویر نمایش داده شده، تصویر پس زمینه ای که ما در CSS مشخص می کنیم خواهد بود.

width: 46px; height: 44px;  : این دستور، بخشی از تصویر که می خواهیم استفاده کنیم را مشخص می کند.

background: url(img_navsprites.gif) 0 0; : تصویر پس زمینه و موقعیت آن را مشخص می کند(left 0px, top 0px).

 این ساده ترین راه برای ایجاد اسپریت های تصویر است. اکنون ما می خواهیم این روش را گسترش دهیم و از لینک ها و افکت های hover استفاده کنیم.

ایجاد یک منو با استفاده از اسپریت های عکس

ما می خواهیم از اسپریت تصویر ("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;}  : در این دستور، position برابر با relative قرار گرفته تا امکان استفاده از پوزیشن absolute در آن فراهم گردد.

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}  : در این دستور margin و padding برابر با 0 قرار گرفته و list-style حذف شده اس و تمام آیتم های لیست به صورت absolute پوزیشن دهی شده اند.

#navlist li, #navlist a {height:44px;display:block;} : در این دستور، ارتفاع(height) تمام تصاویر به مقدار 44px تنظیم شده است.

اکنون شروع به موقعیت دهی و استایل دهی برای هر بخش خاص می کنیم:

home {left:0px;width:46px;}# : تا جای امکان به سمت چپ پوزیشن دهی شده است و عرض(width) تصویر برابر با 46px است.

home {background:url(img_navsprites.gif) 0 0;}# : تصویر پس زمینه و موقعیت آن (left 0px, top 0px) را تعریف می کند.

prev {left:63px;width:43px;}# : این عنصر، 63px از سمت چپ به سمت راست فاصله دارد (عرض home# که 46px است و مقداری فضای اضافی بین آیتم ها) و 43 پیکسل عرض(width) دارد.

prev {background:url('img_navsprites.gif') -47px 0;}# : این دستور، یک تصویر پس زمینه را تعریف می کند که 47px از سمت چپ (به سمت راست) فاصله دارد(home# برابر با 46px + یک پیسکل برای خط جداکننده).

next {left:129px;width:43px;}# : این عنصر، 129px به سمت راست پوزیشن دهی شده است(با شروع از prev# که 63px  است + عرض prev# که 43 پیکسل است + مقداری فضای اضافی) و عرض آن 43px است.

next {background:url('img_navsprites.gif') -91px 0;}# : تصویر پس زمینه را به مقدار 91px به سمت راست تعریف می کند( عرض home# برابر با 46px + یک پیکسل خط تقسیم کننده + عرض prev# که 43px است + تقسیم کننده خط 1px). 

اسپریت تصاویر و افکت Hover

اکنون می خواهیم یک افکت hover را به لیست منوی خود اضافه کنیم.

نکته: سلکتور hover: می تواند بر روی تمام عناصر اعمال شود؛ نه فقط لینک ها.

تصویر جدید ما (img_navsprites_hover.gif) حاوی سه تصویر برای منو و سه تصویر برای افکت 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: url('img_navsprites_hover.gif') 0 -45px;}  ما برای هر سه تصویر hover، از پوزیشن پس زمینه ی(background position) مشابهی استفاده می کنیم؛ تنها 45px پایین تر.