جلسه ۳۲ : تصاویر اسپریت در CSS

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. ممکن است شما بخواهید برای بخش های مختلف وب سایت خود یک تصویر مرتبط قرار دهید تا از این طریق درک کاربران از قسمت های مختلف وب سایت خود را راحت تر کنید. همچنین از این طریق قالب وب شما نمای بهتری می یابد، اما استفاده از تصاویر مختلف باعث افزایش حجم تبادل داده ها با سرور و کاهش سرعت وب سایت شما می شود، برای این منظور شما می توانید به جای استفاده از تصاویر مختلف از یک تصویر اسپریت استفاده کنید، قابلیت Image Sprite در CSS تعریف می شود، و به شما اجازه می دهد از تصاویر گنجانده شده در یک تصویر بهره بگیرید، در ادامه ما به ساختار کلی ایجاد تصاویر اسپریت در CSS پرداخته ایم.

تصاویر اسپریت در CSS

در ادامه این آموزش ما به شما ساختار اصلی پیاده سازی تصاویر اسپریت در CSS را ارائه کرده ایم.

آشنایی با Image Sprite در CSS

تصاویر اسپریت در CSS در واقع مجموعه ای از تصاویر ساده و کم حجم در قالب یک تصویر واحد است.

یک وب سایت با تعداد زیادی از تصاویر مجزا، وقت زیادی از سرور را برای پردازش تصاویر اشغال می کند.

با استفاده از قابلیت Image Sprite در CSS شما از یک تصویر استفاده کرده و زمان پردازش و بارگذاری را کاهش می دهید.

یک نمونه ساده از تصاویر اسپریت در CSS

ما به جای استفاده از تصاویر مجزا از یک تصویر واحد (“img_navsprites.gif”) استفاده می کنیم.

تصاویر اسپریت در CSS

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

مثال زیر اولین بخش از تصویر (“img_navsprites.gif”) را در عنصر مربوطه نمایش می دهد.

تشریح مثال فوق:

• کد <img id="home" src="img_trans.gif"> فقط ظرفی را برای نمایش تصویر اصلی فراهم می کند چراکه ویژگی src نمی تواند خالی باشد.

برای نمایش تصویر مورد نظر ما از کدهای CSS استفاده می کنیم.

• کد width: 46px; height: 44px; نیز عرض و ارتفاع تصاویر را برای نمایش مشخص می کند.
• کد background: url(img_navsprites.gif) 0 0; قسمتی از تصویر اصلی که می خواهیم نمایش دهیم را تعریف می کند.

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

ایجاد لیست navigation با استفاده از Image Sprite در CSS

ما در این قسمت با استفاده از تصویر اسپریت  (“img_navsprites.gif”) یک لیست navigation ایجاد می کنیم.

ما از لیست HTML استفاده می کنیم چراکه هم می تواند لینک داشته باشد و هم از تصاویر پس زمینه پشتیبانی می کند.

تشریح مثال فوق

• #navlist {position:relative;} موقعیت عنصر ظرف را relative تنظیم می کند تا عناصر absolute داخل آن قرار بگیرند.
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} ویژگی های  margin و padding را ۰ قرار می دهیم و list-style را حذف می کنیم.

و position تمام آیتم ها را absolute تنظیم می کنیم.

• #navlist li, #navlist a {height:44px;display:block;} ارتفاع تصاویر را ۴۴px تنظیم کرده ایم.

سپس شروع به تنظیم موقعیت و style هر بخش می کنیم:

• #home {left:0px;width:46px;} : ترازبندی را از چپ تنظیم کرده و عرض تصویر را ۴۶px تعیین کرده ایم.
• #home {background:url(img_navsprites.gif) 0 0;} : تصویر پس زمینه و موقعیت هر یک را از تصویر اصلی انتخاب کرده ایم.
• #prev {left:63px;width:43px;} : فاصله از سمت چپ را ۶۳px و width را  ۴۳px تنظیم کرده ایم.
• #prev {background:url('img_navsprites.gif') -47px 0;} : موقعیت تصویر بعدی را از تصویر اصلی با مختصات ۴۷px- 0 انتخاب کرده ایم.
• #next {left:129px;width:43px;} : موقعیت این تصویر را ۱۲۹px از سمت چپ فاصله داده و width:43px را تنظیم کرده ایم.
• #next {background:url('img_navsprites.gif') -91px 0;} : موقعیت این تصویر را از مختصات ۹۱px- 0 از تصویر اصلی انتخاب کرده ایم.

ایجاد افکت hover در تصویر اسپریت در CSS

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

نکته : انتخابگر :hover نه فقط در لینک ها بلکه می تواند در تمامی عناصر استفاده شود.

تصویر جدید ما  (“img_navsprites_hover.gif”) شامل سه تصویر navigation و سه تصویر با افکت Hover خواهد بود.

از آنجا که ما از یک تصویر واحد استفاده می کنیم زمانیکه کاربر اشاره را روی هر تصویر ببرد بارگذاری را با زمان کمتری خواهیم داشت.

ما فقط سه خط زیر را برای افزودن افکت Hover به تصاویر اعمال می کنیم:

تشریح مثال فوق:

• #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} : برای هر سه تصویر hover ما موقعیت پس زمینه مشابه آن را مشخص می کنیم، فقط ۴۵px پایین تر است.

کلام آخر

تصاویر اسپریت در CSS به شما کمک می کند تا به جای استفاده از تصاویر مختلف در وب قالب خود و بالا بردن زمان بارگذاری سایت و افزایش حجم پردازش سرور، از قسمت های مختلف یک تصویر واحد استفاده کرده و زمان بارگذاری سایت خود را تا حد زیادی کاهش دهید.