آموزش تکنیک Image Sprites در Css

حامد محمدیحامد محمدی
188 بازدید
تکنیک image sprites

تکنیک Image Sprites در کم کردن حجم تصاویر به کمک شما می آید.

Image Sprites یک تکنیک برای ادغام کردن دو یا چندین تصویر در یک تصویر است.

برای توضیحات بیشتر و تمرین نحوه کدنویسی برای این خاصیت مهم، آموزش امروز را مطالعه کنید.

با سلام خدمت همراهان همیشگی سایت پرنیان طرح

تکنیک Image Sprites در کم کردن حجم تصاویر به کمک شما می آید.

Image Sprites یک تکنیک برای ادغام کردن دو یا چندین تصویر، در یک تصویر است.

شاید بپرسید این کار چه مزیتی دارد و چرا باید اینکار را انجام دهیم!!

تصور کنید، سه تصویر دارید که مایل هستید در صفحه وب سایتتان از آنها استفاده کنید. اگر حجم هر یک از تصاویر (در خوشبینانه ترین حالت!) ۵۰kb باشد، بخش تصاویر به تنهایی ۱۵۰kb خواهد بود.

شاید بگویید خب این حجم خیلی کمی است!

بله کم هست! امانه زمانی که کاربر وب شما، دارای سرعت پایین نت باشد.در اینحالت کاربر باید برای لود شدن ۱۵۰kb تصویر، حدودا ۱.۵ دقیقه منتظر بماند!

و این لود نشدن ها و انتظار کاربر برای بالا آمدن صفحه، باعث اُفت سئو و از دست رفتن جذابیت سایت خواهد شد.

پس چه کنیم؟!!!

دقیقا اینجا، css قدرتمند به کمک شما می آید، و ویژگی Image Sprites را به شما پیشنهاد می کند.

این ویژگی چندین تصویر را با هم ادغام کرده و یک تصویر ایجاد می کند. در اینصورت شما به جای ۱۵۰kb ، تنها ۶۰ یا ۷۰kb برای تصاویر خود مصرف خواهید کرد.

همراه ما باشید تا کار با این ویژگی را با هم مرور کنیم.

 

یک مثال ساده

در این مثال ، به جای استفاده از سه تصویر جداگانه، از یک تصویر واحد استفاده می کنیم.

image sprites

 

به کمک css شما فقط بخشی از تصویر را که نیاز دارید نمایش می دهید.

در مثال زیر ، css مشخص میکند که کدام بخش از تصویر بالا نمایش داده شود.

[php]

#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

[/php]

نتیجه را ببینید.

 

توضیحات بیشتر برای مثال

  • <img id=”home” src=”img_trans.gif”> :این دستور ، تنها یک تصویر شفاف و کوچک را تعریف میکند.

دلیل تعریف این تصویر ، این است که مقدار ویژگی src نمیتواند خالی رها شود.

این تصویر کوچک، تصویر پس زمینه ای خواهد بود که ما در css تعریف میکنیم.

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

این مثال، ساده ترین روش استفاده از image sprites است.

در ادامه ، با استفاده جلوه های بیشتر و لینک ها و… آموزش را گسترش می دهیم. و با امکانات بیشتری از این ابزار آشنا می شویم.

ایجاد یک لیست ناوبری با استفاده از Image Sprites

حال میخواهیم با استفاده از همان تصویر بالا، یک لیست ناوبری از تصاویر را با ویژگی Image Sprites ایجاد کنیم.

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

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

[php]

#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;
}
[/php]

 

نتیجه را ببینید. 

توضیحات بیشتر برای مثال:

  • #navlist {position:relative;}

    این دستور ، موقعیت را به صورت نسبی تعریف می کند تا موقعیت مطلق را در داخل خود جای دهد

 

 

  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

    : این دستور حاشیه ی داخلی و خارجی را برابر با ۰ مقداردهی می کند. سبک لیست را حذف میکند.(هیچ استایلی به  لیست نمی دهد) و به تمام المان های لیست، موقعیت مطلقی را نسبت می دهد.

#navlist li, #navlist a {height:44px;display:block;}

این دستور، ارتفاع تمام تصاویر را برابر با ۴۴PX مقداردهی میکند.

 

 

حالا برای هر قسمت ، موقعیت و سبک دلخواه را تعریف میکنیم.

 

#home {left:0px;width:46px;}

این دستور، کل مجموعه را در  سمت چپ قرار داده و عرض تصویر را با ۴۶PX مقداردهی می کند.

 

 

#home {background:url(img_navsprites.gif) 0 0;}

این دستور، تصویر پس زمینه را تعریف میکند و موقعیت آن را با مقادیر LEFT 0PX و TOP 0PX  مقداردهی میکند.

 

 

#prev {left:63px;width:43px;}

این دستور، تصویر را در موقعیت پیکسل ۶۳ام از راست قرار میدهد(تصویر #home  دارای عرض ۴۶است+ مقداری فضای اضافی بین آیتم ها) و همچنین عرض تصویر برابر با ۴۳PX است.

 

#prev {background:url(‘img_navsprites.gif’) -47px 0;}

این دستور ،تصویر را در  موقعیت پیکسل ۴۶ام  از سمت راست قرار میدهد. (عرض تصویر #home  برابر با ۴۶PX است+ ۱PX برای خط جدا کننده)

 

#next {left:129px;width:43px;}

این دستور، تصویر را در موقعیت پیکسل ۱۲۹ام  از راست قرار می دهد.(محل شروع تصویر #prev  از پیکسل ۶۳ام است.+ عرض تصویر   #prev برابر با ۴۶ pxاست. +مقداری فضای اضافی)

 

#next {background:url(‘img_navsprites.gif’) -91px 0;}

این دستور ، تصویر پس زمینه  را در موقعیت پیکسل ۹۱ام، از  راست قرار می دهد. (عرض تصویر #home برابر با ۴۶ پیکسل است.+ ۱پیکسل برای خط جدا کننده+ عرض تصویر #prev برابر با ۴۳پیکسل است + ۱پیکسل برای خط جدا کننده)

 

ایجاد افکت hover  با استفاده از image sprites

حالا میخواهیم یک افکت hover اضافه کنی. یعنی با رد ماوس از روی تصاویر ، عکس العملی از تصویر دریافت کنیم.

مثال جدید ما، سه تصویر برای ناوبری خواهد داشت و سه تصویر برای عکس العمل هنگام رد شدن ماوس از روی آن.

hover برای image sptites

 

از آنجا که این یک تصویر واحد است و شش تصویر جداگانه نیست ، وقتی کاربر ماوس را از روی تصویر عبور می دهد هیچ تاخیری در بارگیری (لود) نخواهد داشت.

برای این کار تنها، سه خط ، کد جدید اضافه میکنیم:

[php]

<html>
<head>
<style>
#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_hover.gif’) 0 0;
}

#prev {
left: 63px;
width: 43px;
background: url(‘img_navsprites_hover.gif’) -47px 0;
}

#next {
left: 129px;
width: 43px;
background: url(‘img_navsprites_hover.gif’) -91px 0;
}

#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;
}
</style>
</head>
<body>

<ul id=”navlist”>
<li id=”home”><a href=”default.asp”></a></li>
<li id=”prev”><a href=”css_intro.asp”></a></li>
<li id=”next”><a href=”css_syntax.asp”></a></li>
</ul>

</body>
</html>

[/php]

 

نتیجه را مشاهده کنید.

توضیحات بیشتر برای مثال:

#home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;}

این دستور ، برای هر سه تصویری که ما برای افکت hover تعیین کرده ایم، یک پس زمینه و موقیت ثابت تعریف می کند.و تنها ۴۵پیسکل، پایین تر، می رود.

 

 

بیشتر بخوانید و تمرین کنید.

دسته بندی آموزش css
اشتراک گذاری
راه حل صحیح موفقیت این است که اشتیاق شما به پیروزی بیشتر از ترس شما از شکست باشد.”انیشتین“

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

23+ محصولات
405+ سفارشات تکمیل شده
2098+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت