Crear un rollover con Sprites

Curiosamente aprendí un nuevo truco en el uso de rollover en sitios web, normalmente lo que uno hacía era tener dos imágenes, una inicial y otra cuando el mouse estuviera sobre la imagen y por medio de javascript unir los eventos con las imágenes y tener el efecto rollover. Bueno, pues esa opción se acabó y con sprites (imágenes dentro de una imagen) esto es más fácil y después del salto les voy a enseñar un ejemplo básico para poder hacerlo y manipular imágenes con CSS.

Primero una breve explicación, un sprite es una imagen que tiene más imágenes dentro, esto es para que en vez de usar miles de imágenes con diferentes cambios, una sola imagen que los contenga reduce el consumo de descarga de datos de un sitio web, así  como la llamada al servidor, pero ¿Cómo se integran estas imágenes? con CSS. Lo que se hace es que se definen estilos usando la misma imagen con la diferencia de que se especifica un área de la imagen a mostrar, logrando el efecto de rollover o cualquier otro con una sola imagen.

Ahora si, vamos a ver un ejemplo.

Para construir con esta técnica unos botones que además incluyan un efecto rollover, en primer lugar se necesitan las imágenes que lo van a formar. Lo normal será diseñar dos por botón, una para la simular el reposo y otra para el efecto pulsación. No hay inconveniente en incluir una tercera para el click o incluso una cuarta para cualquier cosa que nos pueda deparar el CSS3. Todo esto es según lo que pensemos hacer.
Una vez creadas, las colocamos ordenadamente en una sola imagen como la de la izquierda y ya nos quedamos con un sólo fichero. Cada botón en este caso es de 50x50 pixels por lo que, para contener las 6 imágenes que vamos a utilizar, el sprite tendrá 100x150 px.

CSS

.botonrss, .botonword {
text-indent:-9999px;
overflow:hidden;
margin:0px;
}
.botonrss a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) 0px 0px;
}
.botonrss a:hover {
background-position: 0px -50px;
}
.botonrss a:active {
background-position: 0px -100px;
}
.botonword a {
width:50px;
height:50px;
display:block;
background:url(direccion_sprite) -50px 0px;
}
.botonword a:hover {
background-position: -50px -50px;
}
.botonword a:active {
background-position: -50px -100px;
}

Ves que hemos definido una nueva clase por cada botón (botonrss y botonword). La clase principal tiene un text-indent con un valor negativo alto, que en unión del overflow:hidden, nos servirá para que en el caso de que incluyamos texto en el enlace que formará el botón (accesibilidad se llama esto), aquel no sea visible por quedar muy desplazado. Todo ello sin mover también la imagen, que permanecerá donde debe.

 
Luego vemos que para los enlaces, se define con exactitud la medida que tendrá el botón (alto y ancho, en el ejemplo 50x50 px) y un fondo posicionado según la ubicación de la imagen base correspondiente a cada uno. Teniendo en cuenta que la primera coordenada es la horizontal y la segunda la vertical, la imagen del botón rss comienza en la posición [0px.0px] y, por tanto, ese es el valor que se debe poner para mostrar el botón normal. Observando el gráfico de la derecha, podemos deducir que las coordenadas para la imagen del botón normal para Word son 50px 0px y eso es lo que ponemos en la clase correspondiente (.botonword a).

Los valores de las coordenadas tienen que ser negativos porque es como si tuviéramos una ventana de sólo 50x50 px, detrás de la cual se ve parte de una alfombra. Siguiendo con el símil, al poner valores negativos tiramos de la esquina superior izquierda de la alfombra (fondo) y la movemos los pixels indicados a la izquierda y arriba respectivamente, viéndose a través de la ventana justo lo que necesitamos ver.
A partir de aquí ya sólo es necesario asignar propiedades a background-position para las distintas pseudoclases que queremos utilizar (en el ejemplo hover y active), calculando en cada caso las coordenadas que les corresponden.

El último paso será mostrar las imágenes con HTML. Para ello es suficiente con insertar allí dónde queramos que se vean un DIV con la clase correspondiente.

<div class="botonrss"><a href="URL_ENLACE1">Enlace RSS</a></div>
<div class="botonword"><a href="URL_ENLACE2">Enlace Word</a></div>

Y listo, ha quedado nuestro botón rollover, puedes intentar este ejemplo con la primera imagen agregando el código css y el html para comprobar que efectivamente sirve el código.

Extraído de oloblogger