تکه تکه کردن تصاویر در CSS
نمایش بخشی از عکس - تکه تکه کردن تصاویر
می توان مجموعه ای از تصاویر را داخل یک عکسِ تنها قرار داد.
یک صفه وب با تعداد زیادی عکس، می تواند زمان زیادی را برای بارگذاری بگیرد.
در این روش، تعداد درخواست هایی که برای سرور ارسال می شود، کاهش خواهد یافت و پهنای باند را آزاد می کند.
یک مثال ساده از تکه تکه کردن عکس
بجای استفاده از سه عکس، می توانیم از یک عکس تنها استفاده کنیم (img_navsprites.gif):
با CSS می توانیم فقط بخشی از عکس که نیاز داریم را نمایش دهیم.
در مثال زیر، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود:
مثال (تکه تکه کردن تصاویر در CSS)
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
توضیح مثال:
- به خاطر اینکه ویژگی src در تگ </ img> نمی تواند خالی باشد آنرا با عکس "img_trans.gif" مقداردهی می کنیم که یک عکس 1*1 و کاملاً شفاف است.
- باید عرض و ارتفاع بخشی از تصویر اصلی که می خواهیم نمایش داده شود را مشخص کنیم. (width:46px و height:44px)
- در قسمت آخر یعنی background:url(img_navsprites.gif) 0 0 ، عکس پس زمینه و مکان آنرا مشخص می کند. (ابتدا فاصله از سمت چپ و بعد فاصله از بالا)
این آسان ترین روش استفاده از تکه تکه کردن تصاویر است، در قسمت بعد استفاده از آن در لینک ها و افکت Hover را توضیح می دهیم.
ساخت لیست های هدایتی (navigation list)
می توان از تکه تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد.
ما از لیست های HTML استفاده خواهیم کرد، چونکه آنها می توانند لینک باشند و همچنین خصوصیت background را پشتیبانی می کنند:
مثال (تکه تکه کردن تصاویر در CSS)
#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" تنظیم کردیم تا اجازه دهد که عناصری که به صورت مطلق (absolute) مکان دهی شده اند داخل آن قرار گیرد.
- در گزینشگر دوم، در تمام تگ های <li> خصوصیت margin و padding آنها با مقدار "0" تنظیم می شود و با مقداردهی خصوصیت list-style با "none"، علامتگذاری لیست حذف می شود و در نهایت آنها را به صورت مطلق (absolute) مکان دهی می کنیم و فاصله از بالا را با مقدار "0" تنظیم می کنیم.
- در گزینشگر سوم، ارتفاع تمام تصاویر را با مقدار "44px" تنظیم می کنیم.
در ادامه Style و موقعیت هر بخش را مشخص می کنیم:
- در گزینشگر home# ، فاصله از سمت چپ "0" و عرض آن با مقدار "46px" تنظیم شده است، همچنین عکس پس زمینه و مکان آنرا مشخص می کنیم.
- در گزینگشر prev# ، فاصله از سمت چپ را با مقدار "63px" تنظیم می کنیم (در home# عرض با "46px" تنظیم شد که آنرا با مقدار 17px به عنوان فضای خالی جمع می کنیم) و در ادامه مانند قبل عرض را با مقدار "43px" تنظیم می کنیم و همچنین عکس پس زمینه و مکان آنرا نیر مشخص می کنیم.
- ...
افکت Hover
حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم.
عکس جدیدمان ("img_navsprites_hover.gif") شامل 6 تکه تصویر کوچک است، 3 عکس برای حالت معمولی و 3 عکس دیگر برای موقعی که اشاره گر موس روی آنها قرار بگیرد:
بخاطر اینکه 6 عکس مختلف را داخل یک عکس تنها قرار دادیم، زمانی که اشاره گر موس روی تصاویر قرار می گیرد تأخیر بارگذاری وجود نخواهد داشت.
برای اضافه کردن افکت Hover تنها 3 خط کد به مثال قبلی اضافه می کنیم:
مثال (تکه تکه کردن تصاویر در CSS)
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
توضیح مثال:
- چونکه آیتم های لیست شامل تگ <a> هستند، ما می توانیم از شبه کلاس hover: استفاده کنیم.
- برای 3 گزینشگر بالا عکس "img_navsprites_hover.gif" را به عنوان پس زمینه تنظیم می کنیم.
- باید عکس پس زمینه را "45px" پایین تر مکان دهی کنیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 26429