Cartografía de imágenes con CSS

Cartografía de la imagen - Este tutorial te mostrará los beneficios de la cartografía de la imagen y por qué debería aplicar cuando la construcción de sitios. Te llevaré a través del cómo y por qué, además de mostrar la imagen de mapeo en la acción. Este mapeo de imagen tutorial está dirigido a principiantes, y sólo será necesario que usted sepa lo básico de HTML y CSS.

Para ver la demo de la cartografía de imágenes en acción haz click aquí

¿Por qué utilizar una imagen de mapa?

Considere la siguiente imagen. Tenga en cuenta que es en realidad 2 imágenes que se han colocado en el mismo archivo. Esto puede lograrse utilizando el software de imágenes más bien como Photoshop.

Hay dos ventajas principales a la cartografía de la imagen. El primer código más limpio ser, algo que todos los diseñadores web deben aspirar a lograr, la segunda es la capacidad de las asignaciones de la imagen única de superar los problemas planteados por los Estados botón.

Al usar imágenes de sustitución tendrá que descargar algo más que 1 imagen, usted también tendrá que mostrar esta imagen cambia cuando el estado, lo que significa que el navegador tendrá que hacer la imagen descargada en segundo lugar, por lo tanto el traspaso no será tan suave la primera vez que se muestra. Usando un mapa de imagen se detiene por completo este problema, porque cuando la imagen original se descarga también lo es la segunda. No hay ningún retraso, es tan simple como eso.

Cómo Usar un mapa de imagen

Vamos a considerar que quiero desea utilizar el icono de arriba como una imagen de sustitución. Esto tendrá dos estados: gris cuando la página inicial de cargas, y luego de color cuando el usuario se desplaza sobre él. Para ello tendremos que usar algunos estilos CSS simples, el código va a querer algo así.

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


Como se puede ver la misma imagen que se aplica tanto a los Estados estilo, todo lo que estamos haciendo para cambiar el estado está modificando el fondo de posición, así que cuando el usuario se desplaza a través del vínculo de los cambios del estado, pero todo lo que realmente cambia es la la posición de la imagen de fondo de la página. La verdadera belleza de esto es la pequeña cantidad de efectivo que necesita HTML de la página, una vez que haya hecho esto. Para nuestro ejemplo, el HTML real se parece a esto.

< a class = "bookmark" href = "#" >Delicious</ a >


Eso es todo lo que hay que hacer. Con apenas una cantidad pequeña de CSS y la cantidad aún menor de HTML, podemos crear de una manera muy rápida y poderosa de imágenes de sustitución. Para ver la demo en acción haz click aquí.