Eso es lo que muestra el tutorial que te pasé. Te voy a explicar de nuevo.
Mirá este ejemplo:
Código HTML:
Ver original<!doctype html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){
//variables de configuración
var clase_activo = 'boton-activo';
var clase_boton = 'boton';
//obtenemos los botones
var botones = $('.' + clase_boton);
//agregar clase activa si se hace click
botones.click(function(){
botones.not(this).removeClass(clase_activo);
$(this).addClass(clase_activo)
});
});
<!--
.boton{
/* Estilos comunes para TODOS los botones */
display:block;
float:left;
width:88px;
height:198px;
text-indent:-3333px; /*ocultar el texto*/
background-position:right; /* ubicar la imagen de fondo hacia la derecha */
}
/* estilos para cada boton */
#boton-axe{
background-image:url('http://nahueljose.com.ar/upload/uploads/axe.jpg');
}
/* estilos para el boton activo y para el hover */
.boton:hover, .boton-activo{
background-position:left; /* ubicar la imagen de fondo hacia la izquierda */
}
-->
<!-- el boton es un link con el texto axe unlimited, el cual ocultamos y ponemos una imagen -->
<a class="boton" id="boton-axe" href="#">Axe Unlimited
</a>
La primera parte se puede lograr sólo con CSS. Lo que necesitás es crear una imagen sprite. Es decir, una imagen de tu boton con todos los estados. Ejemplo:
Entonces, en este ejemplo, cada parte tiene 98px por 198px. Creás un elemento y le asignás esas dimensiones (en este caso) y ubicás el fondo hacia un lado (usando background-position).
Vos querés que cuando se pase el mouse cambie de color o de estado. Entonces lo que tenés que hacer es "mover" el fondo que creaste nuevamente pero hacia el otro lado.
Además, si al hacer click querés que se quede con la misma forma que si estuviese el mouse encima, quiere decir que el estado :hover tiene que compartir el estilo con la clase .boton-activo. Esta clase necesitamos agregarla con jQuery. Es para lo único que usamos javascript, sólo para agregarle la clase cuando se hace click y quitársela a los demás.
Estudiá el ejemeplo, está todo ahí! Hasta podés usar el mismo código.