Image Sprites

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 پایین‌تر مشخص کرده‌ایم.

صفحهٔ بعد»

«صفحهٔ قبل