استفاده از Image Sprites در CSS
یک Image Sprite مجموعه‌ای از تصاویر است که در یک فایل تصویری ترکیب شده‌اند. استفاده از Image Sprite به شما کمک می‌کند تعداد درخواست‌های سرور و زمان بارگذاری صفحات را کاهش دهید.
مثال ساده از Image Sprites
در این مثال به جای استفاده از سه تصویر جداگانه، از یک تصویر واحد به نام img_navsprites.gif استفاده می‌شود. با CSS، فقط بخشی از این تصویر را که نیاز داریم، نمایش می‌دهیم.
مثال:
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}توضیح:
<img id="home" src="img_trans.gif">: یک تصویر شفاف به عنوان placeholder استفاده شده است، زیرا ویژگیsrcنمی‌تواند خالی باشد.width: 46px; height: 44px;: اندازه‌ی بخشی از تصویر که نمایش داده می‌شود.background: url(img_navsprites.gif) 0 0;: تصویر پس‌زمینه و موقعیت آن (0px از چپ و 0px از بالا) مشخص شده است.
ساخت یک لیست ناوبری با Image Sprites
در این مثال، تصویر sprite 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;
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استفاده می‌شود تا موقعیت‌دهی مطلق درون آن امکان‌پذیر باشد.#navlist li {position:absolute;}: برای هر آیتم لیست، موقعیت‌دهی مطلق استفاده شده است تا بتوانیم موقعیت دقیق هر تصویر را مشخص کنیم.#home, #prev, #next: برای هر بخش از sprite موقعیت و اندازه‌ی مناسب تعیین شده است.
اضافه کردن Hover Effect
در اینجا برای لیست ناوبری یک افکت 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;
}توضیح:
#home a:hover: تصویرimg_navsprites_hover.gifکه شامل افکت‌های hover است، به عنوان پس‌زمینه استفاده می‌شود و موقعیت آن 45px به پایین تغییر داده شده تا تصویر hover نمایش داده شود.
این روش نه تنها درخواست‌های سرور را کاهش می‌دهد، بلکه بارگذاری تصاویر در حین حرکت ماوس بسیار سریع‌تر خواهد بود.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام