PROFILPELAJAR.COM

Mapa de imagen. Al hacer clic en una persona en la imagen, el navegador carga el artículo correspondiente. Nótese que el código de este ejemplo NO es en HTML sino que está escrito en el lenguaje Wiki.

En HTML y XHTML, un mapa de imagen es una lista de coordenadas relacionadas con una Imagen específica, creada para hipervincular áreas de la imagen a diferentes destinos (a diferencia de un enlace de imagen normal, en el que toda el área de la imagen se vincula a un solo destino). Por ejemplo, un mapa del mundo puede tener un hipervínculo de cada país para obtener más información sobre ese país. La intención de un mapa de imagen es proporcionar una manera fácil de vincular varias partes de una imagen sin dividir la imagen en archivos de imagen separados.

Lado del servidor

Los mapas de imagen del lado del servidor se soportaron por primera vez en Mosaic (navegador web) versión 1.1.^[1] Las asignaciones de imágenes del lado del servidor permiten que el navegador web envíe información posicional al servidor sobre dónde hace clic el usuario dentro de una imagen. Esto le permite al servidor tomar decisiones píxel a píxel sobre qué contenido devolver en respuesta (los métodos posibles son usar capas de máscara de imagen, consultas de bases de datos o archivos de configuración en el servidor).

El código HTML para este tipo de mapa de imagen del lado del servidor requiere que la etiqueta <img> esté dentro de una etiqueta de anclaje <a>...</a> y la <img> debe incluir el atributo ismap. Cuando el usuario hace clic dentro de la imagen, el navegador agregará las coordenadas X e Y (relativas a la esquina superior izquierda de la imagen) a la URL del ancla como cadena de consulta y accederá a la URL resultante (por ejemplo,^[2]/imagemapper?3,9).

Si el navegador no es compatible con ismap, la cadena de consulta no se debe agregar a la URL de anclaje y el servidor debe responder adecuadamente (por ejemplo, devolviendo una página de navegación de solo texto).

Lado del cliente

Los mapas de imagen del lado del cliente se introdujeron en HTML 3.2, y no requieren ninguna lógica especial para ser ejecutados en el servidor (son completamente del lado del cliente). Tampoco requieren ningún JavaScript.

HTML puro

Un mapa de imagen del lado del cliente en HTML consta de dos partes:

La imagen real, que está incrustada con la etiqueta <img>. La etiqueta de imagen debe tener un atributo usemap, que nombra el mapa de imagen que se utilizará para esta imagen (pueden existir múltiples mapas de imagen en una sola página).
Un elemento <map> , y dentro de ese, elementos <area>, cada uno de los cuales define un solo área seleccionable dentro del mapa de imagen. Estos son similares a la etiqueta <a> que define qué URL debe abrirse para un enlace web ordinario. Se puede proporcionar un atributo de title, que se puede representar como información sobre herramientas si un usuario de escritorio coloca el puntero del mouse sobre el área. Por motivos de accesibilidad web, a menudo es importante, y en algunos casos puede ser incluso un requisito legal o contractual, proporcionar un atributo alt que describa el enlace que el software lector de pantalla puede leer, por ejemplo, los usuarios ciegos.^[3]

Los elementos <area> pueden ser rectángulos (shape="rect"), polígonos (shape="poly") o círculos (shape="circle"). Los Shape-Values son pares de coordenadas. Cada par tiene un valor X e Y (desde la izquierda/parte superior de una imagen) y está separado por una coma.

Rectángulo: establece cuatro coordenadas: x1, y1, x2, y2
Polígono: establezca tantas coordenadas como desee (un múltiplo de dos): x1, y1, x2, y2, [...] xn, yn
Círculo: un par de coordenadas y otro valor con un radio: x1, y1, radio

El siguiente ejemplo define un área rectangular (9,372,66,397). Cuando un usuario hace clic en cualquier lugar dentro de esta área, se llevan a la página de inicio de la Wikipedia en inglés.

<imagemap>
File:image.png|thumb|center|400px|alt=Texto alternativo|Ejemplo ImageMap. Clikear sobre una zona envía al enlace correspondiente.
  <area shape="rect" coords="9,372,66,397" href="http://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" >
</map>

Wiki

Para los proyectos Wikipedia existe un lenguaje que se adapta al estilo del código de las páginas de Wikipedia. Su sintaxis es similar a HTML, pero más simple.

<imagemap>File:JoshuaReynoldsParty.jpg|Mapa de imagen ...|350px|thumb
...
rect 286 87 376 191 [[Joshua Reynolds|Pintor desconocido]]
circle 100 141 20 [[Joshua Reynolds|Retrato desconocido]]
poly 503 192 511 176 532 176 534 200 553 219 554 234 541 236 525 261 506 261 511 220 515 215 [[Francis Barber|Posiblemente el ...]]
...
default [[Main Page|Go to main page]]
</imagemap>

CSS

Un enfoque más moderno es superponer enlaces en una imagen usando CSS de posicionamiento absoluto; sin embargo, esto solo admite áreas rectangulares seleccionables. Esta técnica de CSS puede ser adecuada para hacer que un mapa de imagen funcione correctamente en iPhones, lo cual puede no reescalar mapas de imágenes HTML puros correctamente.

Creación y uso

Es posible crear mapas de imágenes del lado del cliente a mano usando un editor de texto, pero para ello los diseñadores web deben saber cómo codificar HTML y cómo enumerar las coordenadas de las áreas que desean colocar sobre la imagen. Como resultado, la mayoría de los mapas de imágenes codificados a mano son polígonos simples.

Debido a que la creación de mapas de imágenes en un editor de texto requiere mucho tiempo y esfuerzo, muchas aplicaciones se han diseñado para permitir a los diseñadores web crear mapas de imágenes de forma rápida y sencilla, del mismo modo que crearían formas en un editor de gráficos vectoriales. Algunos ejemplos de estas aplicaciones son Adobe Dreamweaver o KImageMapEditor (para KDE) y el complemento de mapa de imágenes que se encuentra en GIMP.

Los mapas de imágenes que no hacen que sus áreas clicables sean obvias corren el riesgo de someter al usuario a una mystery meat navigation. Incluso cuando lo hacen, a dónde conducen puede no ser obvio. Esto se puede remediar parcialmente con efectos de renovación.^[4]