Como crear un Mapa de Imagen con CSS y XHTML

baluart5 Junio 2005 - 12:00am 0 comentarios
Enviar por Email Imprimir

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.

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más