Credit image

Crear rollover con CSS Sprites

El efecto rollover es el término con el que se conoce al efecto de mover el ratón sobre un icono de una web, y este cambie a otra forma, color o icono. Veamos como hacerlo con Sprites CSS.

El efecto rollover (deslizar encima) es el término anglosajón por el que se conoce al efecto de mover el ratón sobre un icono de una web, y este cambie a otra forma, color o icono, dándo a entender que es un botón presionable.

En este tutorial, vamos a ver como realizar un rollover simple con imágenes, utilizando una técnica llamada CSS Sprites. ¿Por qué con esta técnica? Pues por varias razones:

  • Simplicidad: Se trata de una técnica muy simple que requiere muy poco código. Esto en la web es lo principal. Cuánto menos código, más rápido y menos tiempos de espera.
  • Compatibilidad: Como se utiliza con CSS 2, es compatible con la mayoría de navegadores.
  • Accesibilidad: No usa javascript, y se puede diseñar para ser accesible para usuarios sin esta tecnología.
  • Rapidez: Uno de los problemas de los rollovers con javascript era que las imágenes tardaban en cargarse. Con CSS esto no ocurre, puesto las distintas imágenes están en un mismo fichero.
  • Peticiones: Cada vez que una página se carga, se realiza un cierto número de peticiones de ficheros. Al unir las distintas imágenes del rollover en un sólo fichero, reducimos ese número.

1. Estructura

Antes de comenzar, tenemos que diferenciar las dos partes de nuestro código que vamos tocar:

  • Código HTML: La capa de información. Aquí es donde colocamos toda la información, en el cuerpo de nuestra web.
  • Código CSS: La capa de presentación. Esta zona se encarga de darle forma, colores y demás atributos al código HTML.

El código CSS puede estar «embebido» en una página (como en el ejemplo) o, como suele ser más común y aconsejable, en un fichero externo de extensión .css.

2. Cuerpo de la página (HTML)

En nuestro código html vamos a colocar un enlace normal y corriente, con la única diferencia que le añadiremos un #id para diferenciarlo de otros enlaces.

<a id="rss" href="http://www.emezeta.com/index.xml"></a>

Básicamente, este será el único cambio en el código HTML, ya que lo que nos interesa es que no sea demasiado diferente a un vínculo normal y corriente.

3. Imagen del botón

Antes de continuar, vamos a definir el tamaño de nuestro botón (una unidad). En este ejemplo, el botón tendrá 150px de ancho y 50px de alto.

Duplicaremos el tamaño de la imagen, para colocar 3 imágenes más (4 unidades) de las mismas dimensiones (arriba-derecha, abajo-izquierda y abajo-derecha).

Realmente las necesarias son las dos primeras, pero para tener un ejemplo concreto hemos utilizado las cuatro. Las colocamos adyacentes en un fichero, como muestra la imagen:

4. Presentación (CSS)

Lo primero que haremos en la parte CSS es darle forma al botón. Definimos el tamaño de la imagen (1 unidad) y le asignamos propiedad de bloque (en caso contrario no cambiará el tamaño).

Por último, con la propiedad background le asignamos la imagen (4 unidades) que creamos (rss-css-sprites.png en nuestro ejemplo).

a#rss {
display:block;
width:150px;
height:50px;
background:url(rss-css-sprites.png);
}

Ahora es donde llega la parte fuerte del asunto. Utilizaremos las pseudo-clases de CSS (algo así como eventos) para realizar el efecto. ¿Qué pseudo-clases existen?

  • :link Un enlace en estado normal.
  • :hover Un enlace cuando se pasa el ratón por encima.
  • :active Un enlace cuando está siendo pulsado.
  • :visited Un enlace ya visitado (en historial).

El truco está en combinar cada uno con la unidad de la imagen correspondiente (top = arriba, bottom = abajo, left = izquierda, right = derecha):

a#rss:link { background-position: top left; }
a#rss:hover { background-position: top right!important; }
a#rss:active { background-position: bottom left!important; }
a#rss:visited { background-position: bottom right; }

Con esto lo que conseguimos es que la zona roja (en la imagen) se ruede y muestre esa parte por cada evento ocurrido.

5. Accesibilidad

Queda un pequeño contratiempo con respecto a la accesibilidad. Al principio, en enlace a href del código HTML, no pusimos ningún texto.

Lo correcto sería incluir algo para que en navegadores basados en texto o lectores de voz para invidentes (por ejemplo) les apareciera un texto alternativo del enlace (algo similar al atributo alt del tag IMG) y no un espacio vacío.

Si incluimos el texto en el enlace, nos aparecerá encima de la imagen, arruinando nuestro invento. Pero podemos añadir un text-indent:-9999px; (comentado e inactivo en nuestro ejemplo) para mover (indentar o sangrar) el texto una longitud muy grande hacia la izquierda, solucionando el problema.

El problema de esta solución, es que algunos navegadores muestran el foco activo de la imagen, dejando un resultado bastante feo.

Rafa nos menciona en los comentarios el utilizar una propiedad para ocultarlo:

a#rss { outline:none }

Una última solución, con la desventaja de tener que editar el código HTML, sería introducir el texto en una capa span con clase oculto, que se oculte con CSS mediante el display:none.

<a id="rss" href="http://www.emezeta.com/index.xml"><span class="oculto">Emezeta RSS</span></a> .oculto { display:none }

Ejemplo final de rollover con CSS Sprites.

Escrito por Manz, el , en css. Comentarios recibidos: 17.

17 comentarios de lectores
cavalleto
cavalleto
1

Genial! Gracias por compartirlo, seguro que tendrá mucha aceptación.

inyaka
inyaka
2

es bien entretenido usar esta tecnica, por ejemplo jquery.ui trabaja con sprites para los iconos y ultimamente he estado trabajando con sprites, es muy comodo

Rafa
Rafa
3

Puedes utilizar la propiedad outline:none para ocultar la linea de puntos que rodea al enlace.

Manz
Manz
4 Autor

@Rafa: Tienes toda la razón, no había caído en usar la propiedad outline. ¡Gracias por el consejo! :)

agguusst
agguusst
5

Saludos, excelente idea! hace algun tiempo lei sobre esto, seria de gran ayuda para mi web, ya que manejo muchas imagenes pequeñas, pero que pasa con el IE6, es compatible? Muchos de los usuarios que me visitan usan IE6 aun...

daniel
daniel
6

Buenisimo el tutorial , bien explicado, acompañado por graficos muy bien ilustrado, 10 puntos lo hice de punta a punta. Lo que me gustaria es que hicieras otro con mas imagenes como las webs que usan una sola y meten pilade cosas hasta campos de formularios . Esa seria la propuesta hacer uno de cero como este que realizastes. Muchas Gracias!!!

CristianTheEvil
CristianTheEvil
7

@Rafa: Si pero no seria accesible. Recomiendo utilizar todas las propiedades de background por separado: a#rss { display:block; width:150px; height:50px; background-image:url(rss-css-sprites.png); background-repeat:no-repeat; background-position:0 0; }

Nestor
Nestor
8

excelente ejemplo, justo lo que estaba buscando para ahorrar la carga de mi web y un proyecto que estoy creando saludos y exitos.

carlos
carlos
9

buena solución

Jose Tapia
Jose Tapia
10

Gracias por la info muy valiosa para mi aprendizaje gracias

diego brunt
diego brunt
11

excelente articulo

Santiago
Santiago
12

Hola! Estoy intentando aplicar tu artículo y me parece muy interesante, solo quería preguntarte: ¿Y si el sprite contiene muchas imágenes? ¿Hay alguna forma de definir la posicion en pixeles? Desde ya, muchas gracias.

Manu
Manu
13

Una pasada, me voy corriendo a aplicarlo en mi web... Muchas gracias !!

Razaele
Razaele
14

Muchas gracias, Manz :D . Lo acabo de utilizar y funciona a las mil maravillas. He optado por bloquear el texto con el span, porque otras veces que he intentado hacer pirulas con la indentación ha acabado todo en desastre. Un saludo.

eneko
eneko
15

Hola! me parece una chulada, me gustaria utilizarlo para el navegador de la pagina que estoy haciendo, tengo una imagen duplicada en 4 como en el ejemplo en png, pero no me sale el ejercicio por mas que lo intente, no se en que fallo! por que me sale la imagen entera en vez de un trozo! yo tengo una hoja de estilos css anidada a la de html, asi tengo un codigo mas limpio en la hoja de html. por favor puedes ayudarme? gracias.

naty
naty
16

Gracias! está muy bien explicado. Realmente me sirvió!

Roberto
Roberto
17

Hola. Muchas gracias por este gran aoprte, fue fácil y bastante útil.

Publica tu opinión

Si lo deseas, puedes utilizar el siguiente formulario para publicar tu opinión o responder a alguna de las existentes:

Previsualización

Aquí se previsualizará su comentario. Revise que sea correcto antes de publicarlo.