Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a CSS Sprites: rollover utilizando una sola imagen

Datos de búsqueda

CSS Sprites: rollover utilizando una sola imagen

Actualizado 18 septiembre 2007

A veces para un elemento se define un fondo que cambia según el estado de dicho elemento.

¿Varios fondos suponen varias imágenes? No.

Pongamos por ejemplo un listado de enlaces en una barra de navegación vertical, en la que los enlaces de los elementos de lista (li) tienen tres fondos distintos:

  • El fondo de estado normal.
  • El fondo para estado hover (cuando se pasa sobre el enlace).
  • Y el fondo para el elemento de lista correspondiente a la página que se visualiza en este momento.

Se pueden crear esos fondos por separado, de forma que al cargar la página solo se descargarán el primer y el tercer fondo. El del estado hover se descargará cuando algún enlace sufra ese estado, por lo que al pasar el puntero sobre un enlace con ese fondo para el estado hover, el fondo no aparecerá de inmediato.

O se puede crear una imagen que contenga al mismo tiempo todos los fondos. Antes había tres reglas CSS para definir los fondos de los enlaces de los elementos de lista, y ahora también, con la diferencia que se pondrá la misma imagen en las tres reglas. La diferencia estará en el posicionamiento del fondo. Con la propiedad background-position (o en background) se seleccionará que parte de la imagen se mostrará como fondo. ¿Como? Jugando con posiciones negativas.

La imagen utilizada:

Imagen de ejemplo CSS sprites

Este es el XHMTL utilizado para la lista:

<ul>
 <li><a href="#">Opción 1</a></li>
 <li class="seleccionado"><a href="#">Opción 2</a></li>
 <li><a href="#">Opción 3</a></li>
 <li><a href="#">Opción 4</a></li>
 <li><a href="#">Opción 5</a></li>
</ul>

Y este el CSS:

ul {
list-style:none;
width:160px;
}

ul li a {
display:block;
width:142px;
height:18px;
line-height:18px;
padding-left:18px;
text-decoration:none;
background:#D4DDED url(bg_css_sprites.gif) no-repeat 0 0;
color:#003596;
font-weight:bold;
font-family:verdana,arial,sans-serif;
font-size:12px;
}

ul li.seleccionado a {
background:#CCE5A2 url(bg_css_sprites.gif) no-repeat 0 -18px;
color:#4A601C;
}

ul li a:hover {
background:#F8A1BE url(bg_css_sprites.gif) no-repeat 0 -36px;
color:#762938;
}

Ver ejemplo de CSS sprites.

Referencias y enlaces relacionados

CSS sprites

Recursos de apoyo

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio