Image Sprites

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

Image Sprites - مثال ساده

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

به کمک CSS، می‌توانیم تنها بخشی از تصویر را که نیاز داریم نمایش دهیم.

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

مثال
1 #home {
2   width: 46px;
3   height: 44px;
4   background: url(img_navsprites.gif) 0 0;
5 }


توضیح مثال

  • <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 استفاده خواهیم کرد، زیرا می‌تواند از یک لینک باشد و همچنین از تصویر پس زمینه پشتیبانی کند:

مثال
 1 #navlist {
 2   position: relative;
 3 }
 4 
 5 #navlist li {
 6   margin: 0;
 7   padding: 0;
 8   list-style: none;
 9   position: absolute;
10   top: 0;
11 }
12 
13 #navlist li, #navlist a {
14   height: 44px;
15   display: block;
16 }
17 
18 #home {
19   left: 0px;
20   width: 46px;
21   background: url('img_navsprites.gif') 0 0;
22 }
23 
24 #prev {
25   left: 63px;
26   width: 43px;
27   background: url('img_navsprites.gif') -47px 0;
28 }
29 
30 #next {
31   left: 129px;
32   width: 43px;
33   background: url('img_navsprites.gif') -91px 0;
34 }


توضیح مثال

  • #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 اضافه می‌کنیم:

مثال
 1 #home a:hover {
 2   background: url('img_navsprites_hover.gif') 0 -45px;
 3 }
 4 
 5 #prev a:hover {
 6   background: url('img_navsprites_hover.gif') -47px -45px;
 7 }
 8 
 9 #next a:hover {
10   background: url('img_navsprites_hover.gif') -91px -45px;
11 }


توضیح مثال:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - برای هر سه تصویر hover، یک تصویر پس زمین یکسان در موقعیت یکسان، تنها 45px پایین‌تر مشخص کرده‌ایم.


منابع آموزشی