Science for all

Original article: http://www.frankmanno.com/ideas/css-imagemap/

Mapas de imágenes CSS

A continuación se ofrece un mapa de imagen de ejemplo realizado en su totalidad con sistemas de CSS y XHMTL. Mientras haber añadido el soporte para Javascript (bajo la imágen se muestran los nombres de elementos), decidí deshabilitarlo en el ejemplo actual como allí me toparé con algunos problemas tener JS activado y CSS deshabilitado (vea más detalles a continuación)

La idea inicial apareció debido a un blog que he encontrado en el blog de Gina Trappini, Scribbling.net. Ella ofrece un ejemplo bueno, pero quería hacer lo mismo (o un poco parecido) realizándolo solamente con CSS.

Entonces encontré un enlace a la página web The Daily Kryogenix (a través del artículo d Gina) que me dirigió al mapa de imagen que se utiliza en DHTML y hace uso de la etiqueta de <title> para la visualización de las notas sobre el hotspot. Y aún, algo dependiente a Javascript/DHTML.

En la última instancia decidí hacer uso del método de Puertas Correderas Doug Bowman junto con la lista de definiciones (<dl></dl>).

El método de las puertas correderas le permite contener todos sus efectos prórrogas de las imágenes en un solo archivo de imagen, así como hacer uso de background-position de propiedad CSS para desplazar la imagen en cualquier dirección. Si añade el efecto :hover a sus CSS (en este case se añade a la etiqueta <a> contenida en la etiqueta de <dd>) usted puede desplazar la imagen hasta la posición deseada.

Lo que hice era el mapa de imagen en Photoshop. Como se puede ver en esta imagen, el mapa está heca de tres copias de la misma imagen, aunque con las marcajes diferentes. La mejor (1 de 3) solamente marca los hotspots con los números, mientras que el medio y el último (2 y 3 de 3) cada uno contiene los efectos prórrogas (con la transparencia). Se preguntarán por qué el efecto prórrogo está separado en dos imágenes diferentes. La razón para llevarlo a la separación es debido al solapamiento en los elementos adyacentes (es decir, la pantalla, el portátil y el disco flexible que están en la mesa). En vez de la colisión entre los dos elementos, los efectos prórrogos vecinos eran separados en las múltiples copias de la misma imagen.

Básicamente esto funciona colocando el título del elemento de hotspot en la etiqueta de definición-término (<dt></dt>) de su lista, seguido por la descripción en la etiqueta de definición-descripción (<dd></dd>). Luego CSS esconde la definición-término (que se utiliza muy a menudo cuando CSS está deshabilitado), así como la definición-descripción (mostrada en hover de la ancla) y muestra la definición descripción (en este caso, la descripción de los hotspots que ha escogido para su mapa de imágenes) y de tal manera posiciona y muestra la descripción mediante las vueltas de hotspot (que es también definido en CSS).

El código se degrada muy fácil. Una etiqueta <img> que muestra la versión no mapeada del mapa de imagen está escondida con CSS. Para los que tienen CSS deshabilitado, la versión mapeada de la imagen (imagen compuesta de tres partes) no se muestra como es una parte de background de propiedad CSS. Si usted tiene la ampliación de Web Developer para Firefox, que desactive los estilos. Asi obtendrá una buena idea de la degradación.

A continuación se muestra el ejemplo del código (vea la información sobre el CSS y XHTML en detalle):

 

dd#monitorDef{ top: 65px; left: 114px; }

dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }

dd#monitorDef a span{ display: none; }

dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

 

dd#monitorDef a:hover span{

display: block;

text-indent: 0;

vertical-align: top;

color: #000;

background-color: #F4F4F4;

font-weight: bold;

position: absolute;

border: 1px solid #BCBCBC;

bottom: 100%;

margin: 0;

padding: 5px;

width: 250%;

}

<dl id="officeMap">

 <dt id="monitor">1. Monitor</dt>

 <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor. I wish I had an LCD!</span></a></dd>

 <dt id="phone">2. Phone</dt>

 <dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>

 <dt id="case">3. PC Case</dt>

 <dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>

 <dt id="notebook">4. IBM ThinkPad</dt>

 <dd id="notebookDef"><a href="#"><span>Here's my Linux notebook. Some crazy coding going on.</span></a></dd>

 <dt id="floppy">5. External Floppy Drive</dt>

 <dd id="floppyDef"><a href="#"><span>Floppy Drive. Ancient... I know!</span></a></dd>

</dl>

 

Aunque es posible que no resulte la solución tan eficaz, sin embargo se extiende en los ejemplos proporcionados arriba. Me encanta la idea de Gina y por eso intenté ampliarla. Desgraciadamente, las limitaciones actuales de CSS (así como algunos navegadores), no era capaz reproducir la funcionalidad exacta del ejemplo de Gina en su totalidad.

Aquí hay un ejemplo que hace uso de CSS y Javascript. Me ha enfrentado con un problema que cuando CSS está deshabilitado, pero Javascript está activado. Además, algo extraño pasa con la lista de definiciones. Si usted sabe como corregirlo, que me cuente. Quiero conseguir que funcione.

Pude encontrar un otro intento en el mapa de imágenes basado en CSS que parece muy bueno. Desgraciadamente, debido a las limitaciones de IE (específicamente con un solo soporte del efecto :hover en la etiqueta <a>) no es un cruz-browser compatible (todavía no).

Infórmanos si tiene alguna pregunta, inquietud, sugerencias enviando la nota en frankmanno@gmail.com o deja su comentario en mi blog.

Los ejemplos eran aprobados con éxito en Safari, Firefox (Mac/Win), IE6/Win y Opera 7.5/Mac. Por una u otra razón la versión de Javascript funciona en IE5/Mac, mientras la versión no Javascript no funciona.