GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Galería de Imágenes
Con CSS se puede crear una galería de imágenes.

Ver: Código 195.html

Galería de imágenes responsivas

Podemos utilizar CSS para determinar la resolución de los dispositivos para crear una galería de
imágenes responsiva que se verá bien en equipos de escritorio, tabletas y teléfonos inteligentes.

Ver: Código 196.html

Sprites de imágenes
Un sprite de imagen es una colección de imágenes puestas en una sola imagen.

Sprite 1

Sprite 2

Una página web con muchas imágenes puede tardar mucho tiempo en cargar y genera múltiples
peticiones al servidor. El uso de sprites de imágenes reducirá el número de solicitudes de servidor
y ahorrar ancho de banda.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Ejemplo simple
En lugar de utilizar tres imágenes separadas, utilizamos esta imagen única ( "1.png"):

Con CSS, podemos mostrar sólo la parte de la imagen que necesitamos. En el siguiente ejemplo, el
CSS especifica qué parte de la imagen "1.png" mostrará:

#ambulancia {
width: 100px;
height: 50px;
background: url(imagenes/1.png) 0 0;
}

Ver: Código 197.html

Explicación
 <img id="ambulancia" src="imágenes/tranparente.png"> define Sólo una pequeña imagen
transparente porque el atributo src no puede estar vacío. La imagen que se muestra será
la imagen de fondo especificada en el CSS.
 width: 100px; height: 90px; Define las dimensiones de la imagen que queremos usar
 background: url(imágenes/1.png) 0 0; Define las coordenadas de la imagen de fondo (a la
izquierda 0px, superior 0px)

Lista de navegación con sprites de imágenes

Queremos utilizar la imagen de sprite ("1.png") para crear una lista de navegación. Vamos a
utilizar una lista HTML, ya que puede ser un enlace compatible con una imagen de fondo:

Ver: Código 198.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Efecto hover en sprites de imágenes

Utilizaremos el ejemplo anterior pero añadiremos un efecto hover al posicionar el ratón sobre el
sprite, para ello tomaremos la siguiente imagen:

Sera un solo archivo por lo tanto no habrá retraso en la carga, en esta imagen tendremos la
imagen original y la que usaremos para el hover. Para lograr el efecto solo agregaremos unas
líneas al código:

#ambulancia a:hover {
background: url('imagenes/2.png') 0 -45px;
}

#microscopio a:hover {
background: url('imagenes/2.png') -47px -45px;
}

#medico a:hover {
background: url('imagenes/2.png') -91px -45px;
}

Ver: Código 199.html