ImageMap: mapeando imágenes en el siglo XX

4/sep/2007 10

Viejos tiempos esos de la etiqueta <map>. 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; precisamente utilizaremos la etiqueta de definición de listas <dl>, con lo que definiremos 2 instancias: con <dt> determinamos el concepto de la zona sensible y con <dd> la definición de esa zona, la que se mostrará sólo cuando posamos el mouse sobre <dt>. La idea es que a través de posicionamiento absoluto, definimos las diferentes zonas que queremos que contengan la información auxiliar y con <dd> escondido (display: none;) tendrá el texto que queremos mostrar luego. Para IE6 tendremos la ayuda de <a> para que la pseudo-class :hover funcione como queremos.

El HTML será simple de entender:

<dl id="masaje_img">
     <dt>Masajista</dt>
     <dd id="masajista_def">
          <a href="#"><span>Un masajista es…</span></a>
     </dd>
     <dt>Disponibilidad</dt>
     <dd id="disponible_def">
          <a href="#"><span>Un asiento disponible es….</span></a>
     </dd>
     <dt>Concentraci&oacute;n</dt>
     <dd id="concentracion_def">
          <a href="#"><span>La concentraci&oacute;n es…</span></a>
     </dd>
     <dt>Masajeado</dt>
     <dd id="masajeado_def">
          <a href="#"><span>Masajeado es…</span></a>
     </dd>
</dl>

Tenemos definidas 4 zonas sensibles para una imagen. Cada una tiene su término <dt> y la definición de ese término <dd>. (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 <dl> 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;
}

SafariFirefoxInternet Explorer 7Internet Explorer 6Opera

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 <dl>. 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

Links

Comentarios

  1. Mapeando imágenes en estos tiempos « Cosas sencillas [#]

    […] Mapeando imágenes en estos tiempos En CSSLAB nos recuerdan los viejos tiempos esos de la etiqueta <map>. Aunque su uso es corriente en nuestros días, en sitios donde ponen un GIF y luego lo “mapean” creando links de navegación. […]

  2. Mapear Imágenes sin usar MAP, AREA « Edusanver’s Weblog [#]

    […] Mapear Imágenes sin usar MAP, AREA Todos recuerdan que para tener un area sensible en una imagen se tenia que incluir la etiqueta MAP en la imagen para determinar una area sensible a interectuar con el usuario, pues ahora CSSLab desde Chile nos muestra como obtener el mismo resultado pero utilizando CSS, además cross-browser. Aquí les paso el enlace del articulo completo y el del ejemplo. […]

  3. diarioTHC » Crear zonas sensibles en tus imágenes [#]

    […] Enlace: ImageMap: mapeando imágenes en el siglo XX […]

  4. Juan [#]

    y si el area a mapear no es un rectangulo? si mi memoria no me falla los maps permitían mapear polígonos y círculos?

    es mucho más moderno y de este siglo trabajar con estilos, pero las soluciones que encontremos o desarrollemos deben ser potentes, sino es mejor seguir siendo clasico, no creen?

  5. CSSLab Admin [#]

    Juan: primero reflexiona esto:mapear una imagen, es correcto? cumpleel sentido e la semantica, de darle sentido al contenido? partiendo de ahi, la etiqueta map es considerada obsoleta. la solucion q mostre es solo una manera de simular el mismo efecto pero con sentido para la web, pero no hacer lo mismo. Salu2.

  6. maria [#]

    muy interesante, muchas gracias, voy a probar ya mismo.

  7. Ruben C [#]

    Me interesa hacer algo así como el ejemplo, pero utilizaría áreas pequeñas e irregulares, como un mapa de una país, solo que no se con que hacerlo, que me sugieren utilizar ? Un ejemplo me caería bien

  8. Jorge Epuñan [#]

    Ruben: con esta tecnica solo podras lograrlo con formas rectangulares; si quieres poligonos irregulares e incluso circulos debes entonces utilizar el viejo <map>.

  9. image map [#]

    eche una mirada a este sitio le permite trazar mapas de imagen de CSS imagine mapa

  10. Crear zonas sensibles en tus imágenes - Incubaweb - software y web 2.0 [#]

    […] Enlace: ImageMap: mapeando imágenes en el siglo XX […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab