Rollover con CSS y sprites.

A los que alguna vez hayais pinchado en El botón que no hace nada del pie de página, os sonarán estos enlaces. Anteriormente, tanto estos como el rollover correspondiente, lo tenía hecho con JavaScript, pero desde que descubrí cómo funcionaban los sprites, están construidos mediante esta técnica.

Ver código

Jugar

Visitar Blog

Volver atrás

Incluyendo la imagen que forma el texto principal, con este recurso he logrado pasar de 12 solicitudes al servidor por cada visita, a tan sólo 4. Dividir esto por 3 no está mal ¿no? Visto el contador, si lo hubiera hecho desde el principio, en lugar de acumular más de 150.000 solicitudes -cosa que mi servicio de alojamiento ya me estaba penalizando- llevaría sólo unas 50.000. El otro día explicábamos un poco por encima que es esto de los sprites y hoy toca por fin ver cómo se lleva esto a la práctica.

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 derecha 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.

Ahora viene lo más importante. Creamos las clases y las pseudoclases que vamos a utilizar y les damos valores. Todo esto debe ir en la hoja de estilo o en el caso de Blogger, antes del cierre ]]></b:skin>

.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;
}

Veis que hemos definido una nueva clase por cada boton (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á dónde 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.

Tal y cómo se ha puesto en el ejemplo (display:block) los botones se quedarán en vertical ocupando distintas líneas, pero no hay nada que un float no pueda arreglar para que queden a la misma altura. Lo que ocurre es que entonces tendremos que echar mano de una capa más, con el ancho de todos los botones junto y que encierre a los DIV que forman los botones. También podríamos utilizar position si fuera necesario.

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 ya tenemos nuestros botoncitos con rollover hechos mediante sprites. Estos de ejemplo tienen un enlace vacío para que trasteeis a gusto:

Enlace RSSEnlace Word

Mostrar una imagen sin enlace es bastante más sencillo, ya que sería suficiente con definir sólo la clase principal e insertar un div sin contenido.

.imagenrss {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) 0px 0px;
}
.imagenword {
margin:0px;
width:50px;
height:50px;
background:url(direccion_sprite) -50px 0px;
}

<div class="imagenrss"></div><div class="imagenword"></div>

El sprite a utilizar puede ser tan complejo como queramos y contener muchas o pocas imágenes. Lo que prima es disminuir en lo posible el número de solicitudes para cargar imágenes y el tamaño del sprite en relación con lo que ocuparían las imágenes que lo forman por separado.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter