ImageMap: mapeando imágenes en el siglo XX

Viejos tiempos esos de la etiqueta . Aunque me he deparado más de alguna vez en el presente siglo con sitios donde ponen un GIF y luego lo mapean creando links de navegación. Pésimo. Con Flickr se le dió un nuevo uso al método de agregar zonas sensibles dentro de imágenes con información anexa, lo cual se vió con muy buenos ojos cuando se necesita mostrar detalles de ciertas zonas dentro de las imágenes. Existen un par de técnicas pululando por la web que hacen este trabajo, pero encontré una que se necesita sólo CSS para realizarlo. Funciona perfecto en todos los browsers con los que hice las pruebas, y además aprovecha la [semántica con la que recién estuve escribiendo][1]; precisamente utilizaremos la etiqueta de definición de listas

determinamos el concepto de la zona sensible y con

la definición de esa zona, la que se mostrará sólo cuando posamos el mouse sobre

. La idea es que a través de [posicionamiento absoluto][2], definimos las diferentes zonas que queremos que contengan la información auxiliar y con

escondido (display: none;) tendrá el texto que queremos mostrar luego. Para IE6 tendremos la ayuda de para que la pseudo-class :hover funcione como queremos.

El HTML será simple de entender:

Masajista

Tenemos definidas 4 zonas sensibles para una imagen. Cada una tiene su término

y la definición de ese término

. (aunque para este motivo sirven estas etiquetas, quizás para el que piensas hacer no sea así; viene de tí encontrar alguna otra etiqueta que las reemplace). Todo eso está contenido por su

como esperado. Ya el CSS traae la magia. Lo explicaré com más cautela:

dl#masaje_img {
     position: relative;
     background: url("masaje.jpg") left top no-repeat;
     width: 500px;
     height: 353px;
}
dt {
     position: absolute;
     display: none;
}
dd {
     position: absolute;
}

en dl#masaje_img definimos la imagen de fondo y sus propiedades de alto y ancho. Además, tiene posicionamiento relativo ya que contendrá sus términos y definiciones (dt y dd) absolutamente.

dd#masajista_def {
     top: 5px;
     left: 14px;
}
dd#masajista_def a {
     position: absolute;
     width: 73px;
     height: 69px;
     text-decoration: none;
     border: 1px dashed red;
}
dd#masajista_def a span {
     display: none;
}
dd#masajista_def a:hover {
     background: transparent;
}
dd#masajista_def a:hover span {
     display: block;
     text-indent: 0;
     background: #CCC;
     font-weight: bolder;
     position: absolute;
     border: 1px dashed #666;
     left: 100%;
     margin: 0;
     padding: 5px;
     width: 250%;
}

En dd#masajista_def {} definimos su posición absoluta respecto al contenedor

. Luego, dd#masajista_def a {} corresponde al cuadrado sensible, el que tiene su ancho y alto. Ya dd#masajista_def a span {} es lo que tendrá el texto que se mostrará cuando el mouse se pose sobre la zona sensible que definimos anteriormente. Importante es dd#masajista_def a:hover {} para IE6, ya que sin él no funciona la pseudo-class :hover (prueben quitándolo). IE6 necesita que un link tenga algo dentro de él para mostrar su pseudo-class, entonces qué mejor que definir un background pero transparente. Bien engañado. Finalmente, dd#masajista_def a:hover span {} nos dice que se muestre el texto (junto a algunas propiedades de estilo y posicionamiento).

Esto se repite para cada una de las zonas que quieras tener dentro de tu imagen, cuidando siempre de crear un ID para cada una. ¿Divertido, no?

[Ver ejemplo][3]

Links⌗

CSS Image Maps, Redux

[1]: http://www.csslab.cl/2007/08/31/listo-para-las-listas/ “Enlace en CSSLab a “Listo para las listas”” [2]: http://www.csslab.cl/2007/05/11/absolutamente-si/ “Enlace en CSSLab a “Absolutamente sí”” [3]: /ejemplos/imagemap/index.html “Enlace a ejemplo de “Mapeando imagenes””