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>

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