Урок 9: Sprite бутон

Идеята е проста. Посочвате картинка и тя се променя.
За целта трябва да свържем в една картинка двете състояния и да ползваме готов код:
<style type="text/css">
.sprite {
   background: url(https://lh4.googleusercontent.com/-f656Oijm3nc/T9PRnWDLSLI/AAAAAAAAC2s/3nGb7Fcn1Yg/s162/butterflyani88.gif) no-repeat 0 0;
   width: 162px;
   height: 81px;
   display: block;
   outline:none;
}
.sprite:hover {
   background-position: 0 -81px;
}
</style>


<div style="margin-left: 6px;">
<p title="" class="sprite" href="">
</p>
</div>

Частта в оранжево се поставя по познатия начин с бутона Embed code от Widget :
Частта в зелено се поставя на произволно място в html режим - бутона <>Source:



С бял цвят са стойностите, които може да променяте: Адреса на изображението, отместването и позицията на картинката.
- - - - - - - - - -

В училищния сайт, който администрирам, съм го разположил на няколко места, примерно на началната страница с три състояния - покой, посочване и кликване.
На страницата http://souhssz.webnode.com/zanas/uchilishchata-v-stara-zagora/ съм приложил бутона с пеперуда . При посочване започва да пърха. Ето нейния код:
<style type="text/css">.sprite {   background: url(https://lh4.googleusercontent.com/-f656Oijm3nc/T9PRnWDLSLI/AAAAAAAAC2s/3nGb7Fcn1Yg/s162/butterflyani88.gif) no-repeat 0 0;   width: 162px;   height: 81px;   display: block;   outline:none;}.sprite:hover {   background-position: 0 -81px;}</style>

<div style="margin-left: 9px;">
    <p class="sprite" href="" title="">
    </p>
</div>

- - - - - - -  - - - - ---
Ето готов скрипт за будилник, който започва да звъни при посочване:
<style type="text/css">
.sprite {
   background: url(http://i1147.photobucket.com/albums/o549/souhs/8a22a0d3.gif) no-repeat 0 0;
   width: 50px;
   height: 53px;
   display: block;
   outline:none;
}
.sprite:hover {
   background-position: 0 -53px;
}
</style>


<a title="" class="sprite" >
</a>
Може целия да се постави с бутона Embed code от Widget, просто ще е в отделно панелче.
- - - -- - - -

Няма ограничение какви изображения ще свържете в едно. Идеята е да ги свържете едно над друго, да покажете само горното, а при посочване се показва само долното. Аз си играх с анимирани, но не е задължително.
Ако има въпроси съм насреща : )