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.

css
17

Escrito por

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.

efecto rollover

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:

codigo css html
  • 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="https://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.

rollover fichero imagen

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:

rollover imagen fichero

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.

rollover css sprites

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.

rollover foco activo

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="https://www.emezeta.com/index.xml"><span class="oculto">Emezeta RSS</span></a> .oculto { display:none }

Ejemplo final de rollover con CSS Sprites.

RELACIONADOS Efecto Menéame: ¿Cómo evitar que se caiga mi web? RELACIONADOS 5 pseudoselectores CSS que quizás no conocías RELACIONADOS 10 aventuras gráficas clásicas (III)
x Efecto Menéame: ¿Cómo evitar que se caiga mi web?
Manz

17 comentarios

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

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
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
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
8

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

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.

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

Publica tu opinión