CSS Sprites para efecto rollover en botones e imagenes :: CSS

Inicio

Blog

Manuales

Artculos

Ejemplos

Videotutoriales

Inicio > Comunidad > Artculos Web > Diseo Web > CSS > CSS Sprites para efecto

CSS Sprites para efecto rollover en botones e imagenes

Actualizado el 26/01/2010 < > 3 Cometarios

Resumen: Explicacin de la tcnica CSS Sprites para lograr un efecto rollover (mover el ratn sobre un icono y este cambie dndo a entender que es un botn presionable).
Twittear

Manuales y Artculos Web

Cdigos de ejemplo
El efecto rollover (deslizar encima) es el trmino anglosajn por el que se conoce al efecto de mover el ratn sobre un icono o imagen de una web, y esta cambie a otra forma, color o icono, dando a entender que es un botn presionable. Cdigo listo para hacer un men desplegable con XHTML y CSS El uso de mens en nuestro sitio web y su influencia en la navegacin Crear una galera de imgenes solo con CSS y HTML Capas visibles e invisibles con CSS Maquetar una web a 3 columnas con CSS En este tutorial, vamos a ver como realizar un rollover simple con imgenes, utilizando una tcnica llamada CSS Sprites. Por qu con esta tcnica? Pues por varias razones: Simplicidad: CSS Sprites una tcnica muy simple que requiere muy poco cdigo. Esto en la web es lo principal. Cunto menos cdigo, ms rpido y menos tiempos de espera. Compatibilidad: Como se utiliza con CSS 2, es compatible con la mayora de navegadores. Accesibilidad: No usa javascript, y se puede disear para ser accesible para usuarios sin esta tecnologa. Rapidez: Uno de los problemas de los rollovers con javascript era que las imgenes tardaban en cargarse. Con CSS esto no ocurre, puesto las distintas imgenes estn en un mismo fichero. Peticiones: Cada vez que una pgina se carga, se realiza un cierto nmero de peticiones de ficheros. Al unir las distintas imgenes del rollover en un slo fichero, reducimos ese nmero. CSS avanzado: la propiedad display (primera parte) Cambiar el estilo CSS de una web dinmicamente. Parte III Las horas del da Algunos trucos CSS simples para la maquetacin de pginas web Estilos aleatorios con CSS y PHP Manejo de imgenes con jQuery: Despliegue secuencial Fundamentos de jQuery: Extendiendo la librera

http://www.lawebera.es/como-hacer/ejemplos-css/css-sprites-efecto-rollover-botones-imagenes.php[22/05/2012 12:41:12]

CSS Sprites para efecto rollover en botones e imagenes :: CSS

10 sencillos consejos para mejorar tus

1. Estructura
Antes de comenzar, tenemos que diferenciar las dos partes de nuestro cdigo HTML que vamos tocar:

formularios Ejemplo de utilizacin de propiedades CSS avanzadas CSS Sprites para efecto rollover en botones e imagenes Soluciones a los problemas de visualizacin en Internet Explorer Simular frames (marcos) con HTML y CSS Cmo recuperar los datos de acceso a WordPress (primera parte) Pasar de HTML a XHTML Normas elementales en HTML

Cdigo HTML: La capa de informacin. Aqu es donde colocamos toda la informacin, en el cuerpo de nuestra web. Cdigo CSS: La capa de presentacin. Esta zona se encarga de darle forma, colores y dems atributos al cdigo HTML. El cdigo CSS puede estar embebido en una pgina (como en el ejemplo) o, como suele ser ms comn y aconsejable, en un fichero externo de extensin .css.

CSS: buenas prcticas

Te puede interesar
Lnea de Cdigo Diseo Web

2. Cuerpo de la pgina (HTML)

En nuestro cdigo html vamos a colocar un enlace normal y corriente, con la nica diferencia que le aadiremos un #id para diferenciarlo de otros enlaces.

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

Bsicamente, este ser el nico cambio en el cdigo HTML, ya que lo que nos interesa es que no sea demasiado diferente a un vnculo normal y corriente.

3. Imagen del botn

Antes de continuar, vamos a definir el tamao de nuestro botn (una unidad). En este ejemplo, el botn tendr 150px de ancho y 50px de alto.

Duplicaremos el tamao de la imagen, para colocar 3 imgenes ms (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. Presentacin (CSS)
Lo primero que haremos en la parte CSS es darle forma al botn. Definimos el tamao de la imagen (1 unidad) y le asignamos propiedad de bloque (en caso contrario no cambiar el tamao).

http://www.lawebera.es/como-hacer/ejemplos-css/css-sprites-efecto-rollover-botones-imagenes.php[22/05/2012 12:41:12]

CSS Sprites para efecto rollover en botones e imagenes :: CSS

Por ltimo, con la propiedad background le asignamos la imagen (4 unidades) que creamos (rsscss-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 ratn 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 pequeo contratiempo con respecto a la accesibilidad. Al principio, en enlace a href del cdigo HTML, no pusimos ningn texto. Lo correcto sera 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 vaco. Si incluimos el texto en el enlace, nos aparecer encima de la imagen, arruinando nuestro invento. Pero podemos aadir 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 solucin, 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:

http://www.lawebera.es/como-hacer/ejemplos-css/css-sprites-efecto-rollover-botones-imagenes.php[22/05/2012 12:41:12]

CSS Sprites para efecto rollover en botones e imagenes :: CSS

a#rss { outline:none }
Una ltima solucin, con la desventaja de tener que editar el cdigo HTML, sera 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.tuweb.com/"><span class="oculto">texto oculto</span></a>

.oculto { display:none }
Ejemplo final de rollover con CSS Sprites. Twittear

Seguir el manual
Anterior: Crear esquinas redondeadas con CSS y sin imagenes Siguiente: El uso de mens en nuestro sitio web y su influencia en la navegacin

Publicado el 26/01/2010, ltima actualizacin 26/01/2010. Seguir @lawebera Autor: Manz URL: Emezeta Blog

3 Cometarios

(Subir al texto)

Aadir Comentario

1. Tamao, margen, relleno y bordes de capas con CSS y XHTML / HTML

[...] capa tiene relleno cero, por lo que para que pueda ser visible debe determinarse su valor en el cdigo CSS. Al igual que en el caso de los mrgenes, el relleno se determina lado por lado, a menos que se [...]
Lunes, 12 de abril 2010

2. Laureano
Me resulto muy til esta informacin!! pude hacer estos botones. Mi problema es que, en el editor de html veo perfectamente la accion de cambio de imagen pero en IE y Firefox, directamente al pasar sobre, no me aprece la manito en el cursor. No lo reconoce como boton.. Alguna ayuda Gracias.
Viernes, 18 de marzo 2011

3. Vernica Miln
Laureano, Aade a tu css ( a#rss ) la propiedad cursor:pointer; Saludos,
Lunes, 21 de marzo 2011

http://www.lawebera.es/como-hacer/ejemplos-css/css-sprites-efecto-rollover-botones-imagenes.php[22/05/2012 12:41:12]

CSS Sprites para efecto rollover en botones e imagenes :: CSS

Aadir Comentario
* Campos obligatorios * Nombre

(Subir al texto)

* Correo electrnico (no se publica)

Enviar comentario

Acerca de Newsletter Ser Redactor

Contacto Mapa Web Bajo WordPress

ltimas Novedades
Patrones de diseo web: Patrn F Patrones de diseo web: Patrn Z y diagrama de Gutenberg Instancias de clases y manejo de objetos con MooTools Factores relevantes sobre el uso de floats en el layout Introduccin al manejo de elementos y eventos con MooTools

Vernica Miln - Diseador Web Freelance

Creatialia - Diseo de Pginas Web

2006 - 2012 LaWebera.es Aviso Legal - Privacidad Alojado en CyberNETicos

http://www.lawebera.es/como-hacer/ejemplos-css/css-sprites-efecto-rollover-botones-imagenes.php[22/05/2012 12:41:12]