پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
تکنیک Image Sprites در کم کردن حجم تصاویر به کمک شما می آید.
Image Sprites یک تکنیک برای ادغام کردن دو یا چندین تصویر در یک تصویر است.
برای توضیحات بیشتر و تمرین نحوه کدنویسی برای این خاصیت مهم، آموزش امروز را مطالعه کنید.
با سلام خدمت همراهان همیشگی سایت پرنیان طرح
تکنیک Image Sprites در کم کردن حجم تصاویر به کمک شما می آید.
Image Sprites یک تکنیک برای ادغام کردن دو یا چندین تصویر، در یک تصویر است.
شاید بپرسید این کار چه مزیتی دارد و چرا باید اینکار را انجام دهیم!!
تصور کنید، سه تصویر دارید که مایل هستید در صفحه وب سایتتان از آنها استفاده کنید. اگر حجم هر یک از تصاویر (در خوشبینانه ترین حالت!) 50kb باشد، بخش تصاویر به تنهایی 150kb خواهد بود.
شاید بگویید خب این حجم خیلی کمی است!
بله کم هست! امانه زمانی که کاربر وب شما، دارای سرعت پایین نت باشد.در اینحالت کاربر باید برای لود شدن 150kb تصویر، حدودا 1.5 دقیقه منتظر بماند!
و این لود نشدن ها و انتظار کاربر برای بالا آمدن صفحه، باعث اُفت سئو و از دست رفتن جذابیت سایت خواهد شد.
پس چه کنیم؟!!!
دقیقا اینجا، css قدرتمند به کمک شما می آید، و ویژگی Image Sprites را به شما پیشنهاد می کند.
این ویژگی چندین تصویر را با هم ادغام کرده و یک تصویر ایجاد می کند. در اینصورت شما به جای 150kb ، تنها 60 یا 70kb برای تصاویر خود مصرف خواهید کرد.
همراه ما باشید تا کار با این ویژگی را با هم مرور کنیم.
یک مثال ساده
در این مثال ، به جای استفاده از سه تصویر جداگانه، از یک تصویر واحد استفاده می کنیم.
به کمک 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;}
: این دستور حاشیه ی داخلی و خارجی را برابر با 0 مقداردهی می کند. سبک لیست را حذف میکند.(هیچ استایلی به لیست نمی دهد) و به تمام المان های لیست، موقعیت مطلقی را نسبت می دهد.
#navlist li, #navlist a {height:44px;display:block;}
این دستور، ارتفاع تمام تصاویر را برابر با 44PX مقداردهی میکند.
حالا برای هر قسمت ، موقعیت و سبک دلخواه را تعریف میکنیم.
#home {left:0px;width:46px;}
این دستور، کل مجموعه را در سمت چپ قرار داده و عرض تصویر را با 46PX مقداردهی می کند.
#home {background:url(img_navsprites.gif) 0 0;}
این دستور، تصویر پس زمینه را تعریف میکند و موقعیت آن را با مقادیر LEFT 0PX و TOP 0PX مقداردهی میکند.
#prev {left:63px;width:43px;}
این دستور، تصویر را در موقعیت پیکسل 63ام از راست قرار میدهد(تصویر #home دارای عرض 46است+ مقداری فضای اضافی بین آیتم ها) و همچنین عرض تصویر برابر با 43PX است.
#prev {background:url(‘img_navsprites.gif’) -47px 0;}
این دستور ،تصویر را در موقعیت پیکسل 46ام از سمت راست قرار میدهد. (عرض تصویر #home برابر با 46PX است+ 1PX برای خط جدا کننده)
#next {left:129px;width:43px;}
این دستور، تصویر را در موقعیت پیکسل 129ام از راست قرار می دهد.(محل شروع تصویر #prev از پیکسل 63ام است.+ عرض تصویر #prev برابر با 46 pxاست. +مقداری فضای اضافی)
#next {background:url(‘img_navsprites.gif’) -91px 0;}
این دستور ، تصویر پس زمینه را در موقعیت پیکسل 91ام، از راست قرار می دهد. (عرض تصویر #home برابر با 46 پیکسل است.+ 1پیکسل برای خط جدا کننده+ عرض تصویر #prev برابر با 43پیکسل است + 1پیکسل برای خط جدا کننده)
ایجاد افکت hover با استفاده از image sprites
حالا میخواهیم یک افکت hover اضافه کنی. یعنی با رد ماوس از روی تصاویر ، عکس العملی از تصویر دریافت کنیم.
مثال جدید ما، سه تصویر برای ناوبری خواهد داشت و سه تصویر برای عکس العمل هنگام رد شدن ماوس از روی آن.
از آنجا که این یک تصویر واحد است و شش تصویر جداگانه نیست ، وقتی کاربر ماوس را از روی تصویر عبور می دهد هیچ تاخیری در بارگیری (لود) نخواهد داشت.
برای این کار تنها، سه خط ، کد جدید اضافه میکنیم:
[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 تعیین کرده ایم، یک پس زمینه و موقیت ثابت تعریف می کند.و تنها 45پیسکل، پایین تر، می رود.
