ورود به کارتابل مشتریان وب مهراز
اسپرایت تصویر در CSS
یادگیری CSSاسپرایت تصویر
اسپرایت تصویر مجموعه ای از تصاویر است که در یک تصویر تکی قرار می گیرد.
یک صفحه وب با تصاویر بسیار ممکن است مدت زیادی طول بکشد تا کاملا بارگذاری شود و درخواست های متعددی برای سرور ایجاد می کند. استفاده از اسپرایت تصویر می تواند تعداد درخواست ها از سرور را کاهش داده و پهنای باند را آزاد نگه دارد.
مثال ساده اسپرایت تصویر
بجای استفاده از 3 تصویر زیر ، می توان از یک تصویر استفاده کرد.
با استفاده از CSS فقط قسمت مورد نیاز از تصویر مورد نظر را نمایش می دهیم. در مثال زیر CSS مشخص می کند که کدام بخش از تصویر نمایش داده شود.
مثال :
#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; تصویر زمینه و موقعیت ان را تعیین می کند (left0px top 0px).
این راحت ترین روش استفاده از اسپرایت تصویر است. حال می خواهیم با استفاده از لینک و جلوه اشاره ، آن را گسترش دهیم.
اسپرایت تصویر - ساخت یک لیست ناوبری (منو)
در این قسمت میخواهیم از اسپرایت تصویر برای ایجاد لیست ناوبری استفاده کنیم. درواقع از یک لیست 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;}# موقعیت بر روی 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;}# ارتفاع تمام تصاویر 44 پیکسل است.
حال نوبت استایل دهی به هر بخش مشخص رسیده است :
home {left:0px;width:46px;}# در سمت چپ موقعیت دهی شده است و عرض تصویر 46 پیکسل است.
home {background:url(img_navsprites.gif) 0 0;}# تصویر زمینه و موقعیت آن را مشخص می کند (left 0px , top 0px)
prev {left:63px;width:43px;}# به مقدار 63پیکسل به سمت راست موقعیت دهی شده است. (عرض home مقدار 46 پیکسل است + مقداری فضا مابین دو آیتم) عرض تصویر هم 43 پیکسل است.
prev {background:url('img_navsprites.gif') -47px 0;}# تصویر زمینه به مقدار 47پیکسل به سمت راست موقعیت دهی شده است. (عرض home مقدار 46 پیکسل است + 1 پیکسل خط جداکننده)
next {left:129px;width:43px;}# به مقدار 129پیکسل به سمت راست موقعیت دهی شده است. (prev از 63 پیکسلی شروع می شود + عرض آن که 43 پیکسل است + فضای اضافه) و عرض آن 43 پیکسل است.
next {background:url('img_navsprites.gif') -91px 0;}# تصویر زمینه به مقدار 91 پیکسل به سمت راست موقعیت دهی شده است. (عرض home مقدار 46 پیکسل است + 1 پیکسل خط جداکننده + عرض prev مقدار 43پیکسل است + 1 پیکسل خط جداکننده )
جلوه اشاره در اسپرایت تصویر
حال می خواهیم به لیست ناوبری خود یک جلوه اشاره بدهیم.
نکته ! سلکتور hover: نه فقط بر روی لینک ها ، بلکه بر روی تمام عناصر می تواند استفاده شود.
تصویر جدید ما (img_navsprites_hover.gif) حاوی 3 تصویر ناوبری و 3 تصویر برای استفاده به عنوان جلوه اشاره می باشد.
چون این تصویر یک تصویر تکی است و 6 فایل جداگانه نیست ، به هنگام اشاره ماوس بر روی تصویر ، هیچ تاخیری در بارگذاری تصویر جلوه اشاره ایجاد نخواهد شد.
فقط 3 خط از کد لازم است تا بتوان جلوه اشاره را اضافه کنیم.
مثال :
#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: transparent url('img_navsprites_hover.gif') 0 -45px;}# برای هر 3 تصویر جلوه اشاره تصویر زمینه یکسانی را تنظیم می کنیم ، فقط 45 پیکسل پایینتر.
نظر شما
>