Sprites CSS

Efecto Rollover de 3 posiciones, usando jQuery y Sprite CSS

by cristian_cena

HTML

<div id="boton">Default</div>

<hr/> 
<!-- Imagen original: sprite-->
<img title="imagen original" alt="imagen original" width="101" height="78" src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/253199_2035874826215_1524551436_32229387_507152_n.jpg"> 

<!-- 
    Material de lectura obligatoria:
    http://librosweb.es/css_avanzado/capitulo1/rollovers_y_sprites.html
-->

CSS

#boton{
 background:url("http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/253199_2035874826215_1524551436_32229387_507152_n.jpg") 0 0 no-repeat;
    width:91px;
    height:26px;
    cursor:pointer;
    border:1px solid #26445f;
    padding:0 0 0 10px;
}
/*bien podriamos cambiar el background-position con :hover pero lo hacemos directamente con javascript*/

/*estilos generales: start*/
body{
    background:#3d71a1 url("http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc6/254749_2036025949993_1524551436_32229716_776919_n.jpg") 0 0 repeat;
    font-family:'Lucida Grande',Tahoma, sans-serif;
    line-height:26px;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
    text-shadow:#0C131C 0 1px 0;
}
hr{
    border:none; 
    border-bottom:1px dashed #26445f; 
    margin:15px 0;
}
/*estilos generales: end*/

JavaScript

$(document).ready(function(){
    $("#boton").hover(
        function(){
            $(this).css("backgroundPosition", "0 -26px"); 
            $(this).text("Hover");
        },
        function(){
            $(this).text("Default");
            $(this).css("backgroundPosition", "0 0"); 
        }
    );
    $("#boton").mousedown(function(){
        $(this).css("backgroundPosition", "0 -52px"); 
        $(this).text("Click");
    }).mouseup(function(){
        $(this).css("backgroundPosition", "0 -26px"); 
        $(this).text("Hover");
    });
});