Destacados

Más
Domingo, 13 de septiembre, 2009

Crear rollover con CSS Sprites

17 +30K

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.

Publicidad

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.

Comparte este artículo
Sobre el autor de Emezeta

Escrito por , más conocido como Manz. Es Ingeniero-Técnico en Informática de Gestión por la Universidad de La Laguna y residente en Santa Cruz de Tenerife.

17 comentarios de lectores
cavalleto cavalleto Domingo, 13 de septiembre de 2009, 23:40
1
Genial! Gracias por compartirlo, seguro que tendrá mucha aceptación.
Responder Permalink URL · Mozilla Firefox 3.5.3 · Macintosh ·
inyaka inyaka Lunes, 14 de septiembre de 2009, 04:58
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
Responder Permalink Mozilla Firefox 3.0.14 · Ubuntu Linux ·
Rafa Rafa Lunes, 14 de septiembre de 2009, 21:48
3
Puedes utilizar la propiedad outline:none para ocultar la linea de puntos que rodea al enlace.
Responder Permalink URL · Mozilla Firefox 3.5.3 · Windows Vista ·
Manz Manz Lunes, 14 de septiembre de 2009, 21:56
4
@Rafa: Tienes toda la razón, no había caído en usar la propiedad outline. ¡Gracias por el consejo! :)
Responder Permalink URL · Mozilla Firefox 3.5.3 · Windows Vista ·
agguusst agguusst Miércoles, 23 de septiembre de 2009, 20:07
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...
Responder Permalink Mozilla Firefox 3.5.3 · Windows Vista ·
daniel daniel Sábado, 6 de febrero de 2010, 20:49
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!!!
Responder Permalink URL · Mozilla Firefox 3.0.15 · Windows Vista ·
CristianTheEvil CristianTheEvil Martes, 30 de marzo de 2010, 21:59
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; }
Responder Permalink Mozilla Firefox 3.6.2 · Windows XP ·
Nestor Nestor Jueves, 27 de mayo de 2010, 05:33
8
excelente ejemplo, justo lo que estaba buscando para ahorrar la carga de mi web y un proyecto que estoy creando saludos y exitos.
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows XP ·
carlos carlos Lunes, 5 de julio de 2010, 16:36
9
buena solución
Responder Permalink URL · Mozilla Firefox 3.6.6 · Windows XP ·
Jose Tapia Jose Tapia Lunes, 9 de agosto de 2010, 17:20
10
Gracias por la info muy valiosa para mi aprendizaje gracias
Responder Permalink URL · Mozilla Firefox 3.6.3 · Windows 7 ·
diego brunt diego brunt Sábado, 14 de agosto de 2010, 22:49
11
excelente articulo
Responder Permalink URL · Mozilla Firefox 3.6.8 · Windows 7 ·
Santiago Santiago Lunes, 23 de agosto de 2010, 21:06
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.
Responder Permalink URL · Chrome 5.0.375.127 · Windows 7 ·
Manu Manu Domingo, 6 de marzo de 2011, 21:17
13
Una pasada, me voy corriendo a aplicarlo en mi web... Muchas gracias !!
Responder Permalink URL · Mozilla Firefox 3.6.14 · Ubuntu Linux ·
Razaele Razaele Sábado, 12 de marzo de 2011, 23:25
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.
Responder Permalink Chrome 10.0.648.127 · Ubuntu Linux ·
eneko eneko Viernes, 18 de enero de 2013, 15:52
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.
Responder Permalink Mozilla Firefox 18.0 · Windows XP ·
naty naty Viernes, 15 de marzo de 2013, 06:35
16
Gracias! está muy bien explicado. Realmente me sirvió!
Responder Permalink Chrome 25.0.1364.172 · Windows XP ·
Roberto Roberto Lunes, 15 de julio de 2013, 15:14
17
Hola. Muchas gracias por este gran aoprte, fue fácil y bastante útil.
Responder Permalink Chrome 28.0.1500.71 · Windows 7 ·
Publica tu opinión



Acepto las condiciones y políticas de privacidad de este sitio web.
Suscribirme a través de FeedBurner a los nuevos artículos del blog por email.

Previsualización

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