آموزش Spriteهای تصویر در CSS

Image Sprite چیست؟

عبارت است از مجموعه ی از تصاویر که در یک تصویر گنجانده شده است. sprite خود یک تصویر دو بعدی (تصویر کوچک) است که در صحنه نمایش بزرگتری جای داده شده و مستقل از دیگر تصاویر پس زمینه قبل جا به جایی می باشد.
یک صفحه وب که دربردارنده ی تصاویر زیادی است، طبیعتاً زمانی زیادی برای بارگذاری و تولید درخواست های متعدد به سرور نیاز دارد.
با بهره گیری از image sprite می توان تعداد درخواست های سرور (server request) را کاهش داد و در مصرف پهنای باند صرف جویی کرد.

Image Sprites – مثالی ساده

به جای استفاده از سه تصویر جداگانه، یک تصویر واحد مورد استفاده قرار می دهیم که هر سه را دربر گیرد ("img_navsprites.gif"):

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

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


        #next {
            width: 43px;
            height: 44px;
            background: url(img_navsprites1.gif) -91px 0;
        }

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 sprite است. اکنون می خواهیم با استفاده از لینک و hover effects آن را بسط دهیم.

Image Sprites – ایجاد لیست پیمایشی (navigation list)

می خواهیم یک ("img_navsprites.gif") image sprite جهت ایجاد لیست پیمایشی بکار ببریم.
یک لیست HTML بکار می بریم، زیرا می تواند مثل لینک عمل کرده و همچنین از تصویر پس زمینه پشتیبانی کند.

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

}

موقعیت دهی به صورت نسبی (relative) تنظیم و مقداردهی می شود تا بدین وسیله امکان موقعیت دهی از نوع مطلق (absolute) داخل آن ممکن شود

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

margin و padding هر دو 0 مقدار دهی شده، list-style حذف گردیده و تمامی آیتم های لیست به صورت نسبی موقعیت دهی شده اند .

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

ارتفاع یا طول کلیه ی تصاویر 44px می باشد .
حال سبک دهی (styling) و موقعیت دهی (positioning) را برای هر بخش معین آغاز می کنیم:

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

در چپ ترین موقعیت (دورترین موقعیت سمت چپ) قرار داده شده و عرض یا پهنای تصویر 46px می باشد .
#home {background: url('img_navsprites.gif') 0 0; } : تصویر پس زمینه و موقعیت آن را تعریف می کند(top 0px,left 0px) .
#prev { left: 63px; width: 43px; background: url('img_navsprites.gif') -47px 0; }
به اندازه ی 63px در سمت راست قرار داده می شود)کمی فضای اضافه بر سازمان بین آیتم ها #home width 46px +)، عرض نیز 43px می باشد.
#prev {background: url('img_navsprites.gif') -47px 0; }
تصویر پس زمینه را به اندازه ی 47px در سمت راست قرار می دهد(#home width 46px + 1px line divider) .
#next { left: 129px; width: 43px; background: url('img_navsprites.gif') -91px 0; } – به اندازه ی 129px در سمت راست موقعیت دهی می شود (ابتدای #prev حدوداً 63px است + #prev width 43px + فضای اضافه بر سازمان)، و پهنا 43px می باشد.
#next {background: url('img_navsprites.gif') -91px 0; – تصویر پس زمینه را 91px به سمت راست مقدار دهی می کند .
(#home width 46px + 1px line divider + #prev width 43px + 1px line divider )

(قرار گرفتن مکان نمای موس روی تصویر)Image Sprites - Hover Effect

حال می خواهیم یک رویداد hover به لیست پیمایشی خود اضافه کنیم.
انتخابگر (selector):hover زمانی بکار می رود که نشانگر موس به منظور انتخاب آیتم مورد نظر روی آن قرار می گیرد.

تصویر جدیدمان ("img_navsprites_hover.gif") حاوی سه تصویر پیمایشی (navigation image) و سه تصویر ویژه ی رویدادهای hover می باشد:
به منظور افزودن رویداد hover کافی است تنها سه خط کد بنویسیم:

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

برای هر سه تصویری که رویداد hover به آن ها اعمال شده همان موقعیت پس زمینه را تعریف می کنیم، فقط 45px پایین تر.