Un mapa de imagen es crear zonas activas en la imagen misma, de tal manera que cuando uno pasa el mouse sobre una parte de la imagen, podamos ver una reseña de lo que esta área muestra. Ver un ejemplo.
Como se logra esto? Para este ejemplo, transformando una lista de definición html <dt></dt> en el mapa visto, usando nada más que CSS.
Pero la idea no es limitarse solamente a esto, sino entender como funcionan.
Los mapas de imagen utilizan el pseudoelemento :hover para definir un estilo diferente para cada enlace al pasar el ratón por encima. De esta manera logramos que nuevas imágenes floten encima del fondo, siempre que el usuario mueva su ratón sobre una de las áreas de enlaces invisibles.
En este enlace hay un tutorial (en ingles) que explica como se crea el mapa, paso a paso.
En este otro enlace, uno en español, que también trata, de una manera muy detallada, el tema.
Si te gustó este artículo también te gustará...
