کار با Sprite ها در CSS

sprite چیست؟

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

با یک مثال ساده شروع می کنیم؛ به جای استفاده از تصاویر متعدد از تصویر زیر استفاده می کنیم:

چند تصویر در یک تصویر (مفهوم sprite)

حالا با استفاده از CSS میتوانیم تنها قسمتی از این تصویر را نشان دهیم که خودمان بخواهیم. به طور مثال در کد زیر با استفاده از CSS مشخص کرده ایم که کدام قسمت از این تصویر (نام فایل img_navsprites.gif است) نمایش داده شود:

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="https://www.w3schools.com/css/img_trans.gif" width="1" height="1"><br><br>
<img id="next" src="https://www.w3schools.com/css/img_trans.gif" width="1" height="1">

</body>
</html>

مشاهده ی خروجی در JSBin

توضیح مثال بالا به این شکل است که ابتدا عنصر <"img id="home" src="img_trans.gif> را داریم. این عنصر قرار است قسمتی از تصویری که میخواهیم را نشان دهد. سپس با استفاده از ;width: 46px; height: 44px اندازه ای را برای این عنصر تعیین می کنیم. این اندازه باید بر حسب قسمتی از تصویر باشد که می خواهید نمایش دهید. در آخر نیز دستور ;background: url(img_navsprites.gif) 0 0 تصویر پس زمینه را تعیین کرده و به آن موقعیت مکانی (left 0px, top 0px) می دهد. این ساده ترین حالت استفاده از Sprite ها است اما هنوز هم می توان خلاقانه تر کار کرد.

ایجاد لیست navigation

در مثال زیر میخواهیم با استفاده از تصویر اولیه مان یک لیست navigation بسازیم. دلیل استفاده ی ما از لیست های HTML ای این است که می توانند لینک دار شوند و همچنین تصاویر پس زمینه بگیرند. به کد زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#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('https://www.w3schools.com/css/img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('https://www.w3schools.com/css/img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('https://www.w3schools.com/css/img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

مشاهده ی خروجی

بیایید کد بالا را بررسی کنیم:

navlist# و position:relative: مقدار position را روی relative (نسبی) تنظیم کرده ایم تا بعدا بتوانیم عناصر داخلش را به صورت absolute موقعیت دهی کنیم.
آیتم های <li> داخل navlist# و ;margin:0;padding:0;list-style:none;position:absolute;top:0: ابتدا margin و padding پیش فرض را حذف کرده ایم تا فضا بهم نخورد و بتوانیم تصاویر را در کنار هم قرار دهیم. سپس تمام li ها را به صورت absolute موقعیت دهی کرده ایم تا بتوانیم قسمت مورد نظر از تصویرمان را نمایش دهیم (استفاده از دستورات موقعیت دهی در CSS در کد بالا).
آیتم های <li> و <a> داخل navlist# و ;height:44px;display:block: بر اساس اندازه ی تصویر اصلی مان ارتفاع را 44px تعیین کرده ایم. شما باید این مقدار را بر اساس تصویر خودتان تغییر دهید. برای پی بردن به سایز تصاویرتان می توانید از نرم افزار فتوشاپ یا نرم افزار ها و وبسایت های مشابه استفاده کنید.

تا این قسمت به صورت کلی کار را توضیح دادیم اما از این قسمت به بعد باید position و استایل دهی را در نظر بگیریم:

home# و ;left:0px;width:46px: ابتدا خانه را به طور کامل به سمت چپ برده ایم و سپس عرض آن را 46 پیکسل تعیین کرده ایم. عدد 46 پیکسل عرض قسمتی از تصویر است که میخواهیم نمایش داده شود (همان خانه) بنابراین برای تصاویر شما فرق خواهد کرد.
home# و ;background:url(img_navsprites.gif) 0 0: با این دستور تصویر پس زمینه و موقعیت آن را مشخص می کنیم؛ یعنی از سمت چپ صفر پیکسل و از بالا نیز صفر پیکسل فاصله.
prev# و ;left:63px;width:43px: در اینجا دکمه ی قبل (preview) را با 63px از سمت راست قرار داده ایم (عرض خانه که 46px بود + کمی فضای خالی بین تصاویر تا به هم نچسبند) و عرض خودش را نیز 43px تعیین کرده ایم.
prev# و ;background:url('img_navsprites.gif') -47px 0: حالا تصویر را 47px پیکسل به سمت راست برده ایم (عرض خانه که 46 پیکسل بوده است + 1 پیکسل هم آن خط تیره ی وسط تصاویر است).
next# و ;left:129px;width:43px: دکمه ی بعدی (next) را 129px به سمت راست قرار داده ایم (عنصر prev که 63 پیکسل بود + عرض خودِ prev که 43 پیکسل بود + کمی فضای اضافی بین تصاویر) و عرض خودش را هم 43px تعیین کرده ایم.
next# و ;background:url('img_navsprites.gif') -91px 0: تصویر پس زمینه را 91px به سمت راست تعیین کرده ایم (عرض خانه 46px بود + 1px خط تیره ی بین تصاویر + عرض عنصر prev که 43px بود + 1px برای خط تیره ی بعدی).

ایجاد حالت hover

حالا که این منوی navigation را ایجاد کرده ایم باید اثر hover را نیز روی آن بگذاریم تا جذاب تر شود. حتما به یاد دارید که hover را می توانید با هر عنصری استفاده کنید. برای این مثال تصویر زیر را داریم:

از آن جایی که این فایل تنها یک فایل تصویر است و 6 تصویر جداگانه نیست، زمانی که کاربر موس خود را روی این عنصر ببرد (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;
}

بنابراین کد کامل شده می شود:

<!DOCTYPE html>
<html>
<head>
<style>
#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('https://www.w3schools.com/css/img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('https://www.w3schools.com/css/img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

مشاهده ی خروجی

در این کد می گوییم اگر hover اتفاق افتاد، از همان تصویر پس زمینه استفاده کن اما آن را 45px پایین تر بیاور. بدین صورت شاهد اثر hover می شویم.

امیدوارم از این قسمت لذت برده باشید.