[CSS] Sprites en imagen W3Schools

Imagen Sprites

Un Sprite es una colección de imágenes puestas en una sola imagen.
Una pagina web con varias imágenes puede tomar un largo tiempo para cargar y genera múltiples peticiones al servidor.
Usando una imagen Sprite podemos reducir el numero de peticiones y ahorrarnos ancho de banda.

Imagen Sprites - Ejemplo Simple

En lugar de usar tres imagenes separadas, usamos esta única  ("img_navsprites.gif"):

Con CSS Podemos mostrar solo la parte que necesitamos.
En el siguiente ejemplo, el CSS especifica que parte de la imagen img_navsprites.gif va a mostrar:

Ejemplo Explicado:

• <img class="home" src="img_tras.gif" />  - Solo define una pequeña imagen transparente por que el atributo SRC no puede estar vacio. La imagen que se muestra sera la imagen de fondo se especifica en el CSS.
• width:45px;height:44px; - Define  la porcion de la imagen que queremos usar.
• background:url("nav_sprites.gif") 0 0;  - Define la imagen de fondo y su posicion (left 0px top 0px).

Esta es la forma mas facil de usar Sprites en imagenes, Ahora queremos agregar enlaces y ponerles efectos de hover.

Imagen Sprites - Crear una lista de navegación

Usaremos la imagen "nav_sprites.gif" para crear una lista de navegacion.
Vamos a utilizar una lista de HTML, ya que puede ser un enlace y también es soporta una imagen de fondo:

Ejemplo Explicado:

• #navlist{position:relative;} - La posicion se establece como relativa para permitir la absoluta dentro de ella
• #navlist li {margin: 0;padding: 0;list-style: none;position:absolute;top:0;} - margin(margen) y padding(relleno) se establece en 0, se elimina list-style y todos los elementos de la lista se colocan en posicion absoluta
• #navlist li, #navlist a{height: 44px;display: block;} - el alto de todas las imagenes es de 44px

Ahora empieza la posicion y estilo para cada parte especifica:

• #home{left:0;width: 46px;}  - posiciona todo a la izquierda, y el ancho de la imagen es de 46px
•  #home{background: url("img_navsprites.gif") 0 0;}  - Define el fondo y su posicion (left:0px, top:0px)
•  #prev{left: 63px;width: 43px;}  - posicionado 63px a la derecha, (#home width:46px + un espacio extra entre los elementos de la lista), y el ancho es 43px.
• #prev{background: url("img_navsprites.gif") -47px 0;}  -  Define el fondo de la imagen 47px a la derecha (#home width 46px + 1px como divisor de linea)
• #next{left: 129px;width: 43px;} - posicionado 129px a la derecha (comienza desde #prev que es 63px + #prev width 43px + espacio extra), y el ancho es de 43px.
• #next{background: url("img_navsprites.gif") -91px 0;}  -  Define el fondo 91px a la derecha (#home width 46px + 1 como linea divisora + #prev width 43px + 1 linea divisora)

Imagen Sprites - Efecto Hover

Ahora vamos a agregar un efecto a nuestra lista de navegacion.

El selector :hover es usado para seleccionar elementos cuando el mouse esta encima de el elemento. Tip: El selector :hover puede ser usado en todos los elementos no solamente en enlaces.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imagenes de navegacion y tres para los efectos del hover.

Por que esta es una sola imagen, y no seis imagenes separadas, esto no tardara en cargar cuando hagas el efecto hover en la imagen.

Solo agregamos tres lineas de codigo para añadir el efecto hover:

Ejemplo Explicado:

• #home a:hover{background: url("img_navsprites_hover.gif")  0 -45px;}  - Para los tres efectos hover de las imagenes nosotros especificamos la misma posicion -45px

Fuente: http://www.w3schools.com