سبد (0)

تکه تکه کردن تصاویر در CSS

نمایش بخشی از عکس - تکه تکه کردن تصاویر

Wiki

می توان مجموعه ای از تصاویر را داخل یک عکسِ تنها قرار داد.

یک صفه وب با تعداد زیادی عکس، می تواند زمان زیادی را برای بارگذاری بگیرد.

در این روش، تعداد درخواست هایی که برای سرور ارسال می شود، کاهش خواهد یافت و پهنای باند را آزاد می کند.


یک مثال ساده از تکه تکه کردن عکس

Wiki

بجای استفاده از سه عکس، می توانیم از یک عکس تنها استفاده کنیم (img_navsprites.gif):

navigation images

با CSS می توانیم فقط بخشی از عکس که نیاز داریم را نمایش دهیم.

در مثال زیر، مشخص می کنیم که کدام بخش از عکس "img_navsprites.gif" نمایش داده شود:

مثال (تکه تکه کردن تصاویر در CSS)

img.home
{
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)

Wiki

می توان از تکه تکه کردن تصاویر در ساخت، لیست های هدایتی (navigation list) استفاده کرد.

ما از لیست های HTML استفاده خواهیم کرد، چونکه آنها می توانند لینک باشند و همچنین خصوصیت background را پشتیبانی می کنند:

مثال (تکه تکه کردن تصاویر در CSS)

#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;}
#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

Wiki

حالا می خواهیم افکت Hover را به لیست هدایتیمان اضافه کنیم.

عکس جدیدمان ("img_navsprites_hover.gif") شامل 6 تکه تصویر کوچک است، 3 عکس برای حالت معمولی و 3 عکس دیگر برای موقعی که اشاره گر موس روی آنها قرار بگیرد:

navigation images

بخاطر اینکه 6 عکس مختلف را داخل یک عکس تنها قرار دادیم، زمانی که اشاره گر موس روی تصاویر قرار می گیرد تأخیر بارگذاری وجود نخواهد داشت.

برای اضافه کردن افکت Hover تنها 3 خط کد به مثال قبلی اضافه می کنیم:

مثال (تکه تکه کردن تصاویر در CSS)

#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;}
خودتان امتحان کنید »

توضیح مثال:

  • چونکه آیتم های لیست شامل تگ <a> هستند، ما می توانیم از شبه کلاس hover: استفاده کنیم.
  • برای 3 گزینشگر بالا عکس "img_navsprites_hover.gif" را به عنوان پس زمینه تنظیم می کنیم.
  • باید عکس پس زمینه را "45px" پایین تر مکان دهی کنیم.

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه