برای ساخت دکمه های زیبا می توان از این تکنیک ها استفاده نمود

sprite تصویر مجموعه ای از تصاویر است که درون یک تصویر واحد گذاشته شده اند.

صفحه وبی با تصاویر زیاد، مدت طولانی طول می کشد تا load شود و requestهای زیادی از سرور می کند.

استفاده از spriteهای تصویر، تعداد requestها از سرور را کاهش می دهد و پهنای باند را ذخیره می کند.

Spriteهای تصویر – مثالی ساده
img.home
{width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

<img class="home" src="img_trans.gif" /> – فقط یک تصویر کوچک شفاف تعریف می کند زیرا اتریبیوت src نباید خالی باشد. تصویر نمایش داده شده، پیش زمینه تصویری است که در CSS معین کردیم.

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

background:url(img_navsprites.gif) 0 0 – پشت زمینه تصویر و موقعیتش را تعریف می کند.

این، آسان ترین راه برای استفاده از spriteهای تصویر است، حالا می خواهیم با استفاده از لینک و hover effects آن را گسترش دهیم.

Spriteهای تصویر – ایجاد لیست پیمایش

می خواهیم از sprite تصویر ("img_navsprites.gif") استفاده کنیم تا یک لیست پیمایش ایجاد کنیم.

ما از یک لیست HTML استفاده می کنیم، زیرا می تواند یک لینک باشد و همچنین تصویر پیش زمینه را نیز ساپورت می کند:

بجای استفاده از سه تصویر، از یک تصویر واحد استفاده می کنیم ("img_navsprites.gif")

با CSS می توان فقط قسمت از عکس را که نیاز است، نشان داد.

در مثال زیر، CSS تعیین می کند کدام بخش از تصویر "img_navsprites.gif" نشان داده شود:

#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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

  مثال بالا توضیح داد که:

  • #navlist{position:relative;} – موقعیت روی "نسبی (relative)" تنظیم می شود تا اجازه موقعیت یابی مطلق درون آن را بدهد.
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin و padding روی 0 تنظیم می شوند، list-style حذف می شود، و همه list itemها موقعیت یابی مطلق می شوند.
  • #navlist li, #navlist a{height:44px;display:block;} – ارتفاع همه تصاویر 44px است.

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

  • #home{left:0px;width:46px;} – تا منتهی الیه چپ موقعیت یابی می شوند، و پهنای تصویر 46px است
  • #home{background:url(img_navsprites.gif) 0 0;} – تصویر پشت زمینه و موقعیتش را تعریف می کند (چپ 0px، بالا 0px)
  • #prev{left:63px;width:43px;} – 63px به سمت راست موقعیت یابی می شود (46px پهنای home، + مقداری فضای اضافی بین آیتم ها) و پهنایش 43px است
  • #prev{background:url('img_navsprites.gif') -47px 0;} – تصویر پیش زمینه را 47px به سمت راست تعریف می کند
  • #next{left:129px;width:43px;} – 129px به سمت راست موقعیت یابی می شود (63px شروع #prev + 43px پهنای #prev ، + فضای اضافی)، و پهنا 43px است.
  • #next{background:url('img_navsprites.gif') no-repeat -91px 0;} – تصویر پیش زمینه را 91px به سمت راست تعزیف می کند (46px پهنای #home، + 1px تقسیم کننده خط + 43px پهنای #prev + 1px نقسیم کننده خط)
Spriteهای تصویر – افکت hover

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

عکس جدیدمان ("img_navsprites_hover.gif") شامل سه تصویر پیمایش و سه تصویر جهت استفاده برای افکت های hover می شود.

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

حالا فقط سه خط کد اضافه کنید تا افکت 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;}

 مثال بالا توضیح داد که:

  • از آنجاییکه list item حاوی یک لینک است، می توانیم از :hover pseudo-class
  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} برای هر سه تصویر hoverف ما یک موقعیت پیش زمینه تعیین می کنیم، فقط 45px پایین تر.