Mapa de imágenes

En HTML y XHTML, un mapa de imagen es una lista de coordenadas relacionadas con una imagen específica, creada para vincular áreas de la imagen a diferentes destinos (a diferencia de un vínculo de imagen normal, en el que toda el área de la imagen enlaza con un único destino). Por ejemplo, un mapa del mundo puede tener hipervínculos a 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 imágenes del lado del servidor se admitieron por primera vez en Mosaic (navegador web) versión 1.1. Los mapas 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 permite que el servidor tome decisiones píxel por 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 el <img> debe incluir el atributo ismap.

.a href="/imagemapper"■.img src="image.png" ismap /a■

Cuando el usuario hace clic dentro de la imagen, el navegador agregará las coordenadas X e Y (en relación con la esquina superior izquierda de la imagen) a la URL ancla como una cadena de consulta y accederá a la URL resultante (por ejemplo, /imagemapper?3,9).

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

Lado del cliente

Los mapas de imágenes del lado del cliente se introdujeron en HTML 3.2 y no requieren ninguna lógica especial para ejecutarse en el servidor (son completamente del lado del cliente). Tampoco requieren JavaScript.

HTML puro

Un mapa de imágenes del lado del cliente en HTML consta de dos partes:

1. la imagen real, que está incrustada en tag. La etiqueta de imagen debe tener un atributo usemap, que nombre el mapa de imagen para utilizar para esta imagen (imagen múltiple puede existir en una sola página).
2. A elemento, y dentro de eso, elementos, cada uno de los cuales define un solo área clicable dentro del mapa de imágenes. Estos son similares a los tag definir qué URL debe abrirse para un enlace web ordinario. A title atributo puede ser proporcionado, que puede ser renderizado como un puntaje de herramientas si un usuario de escritorio arrastre su puntero del ratón sobre el área. Por razones de accesibilidad web, a menudo es importante – y en algunos casos puede incluso ser un requisito legal o contractual – proporcionar un alt atributo que describe el enlace que el software de lector de pantalla puede leer a, por ejemplo, usuarios ciegos.

Los elementos <area> pueden ser rectángulos (shape="rect"), polígonos (shape=" poly") o círculos (shape="circle"). Los valores de forma son pares de coordenadas. Cada par tiene un valor X y Y (desde la izquierda/arriba de una imagen) y se separa con una coma.

• Rectángulo: Establecer cuatro coordenadas: "x1,y1,x2,y2"
• Polygon: Establecer tantas coordenadas como se desee (un múltiple de dos): "x1,y1,x2, y2, [...] xn,yn"
• Círculo: Una coordenada y otro valor con un radio: "x1,y1,radius"

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

.img src="image.png" Alt="Mapa web" usemap="#mapname" /.mapa Nombre="mapname"■ .zona forma="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" Alt="Wikipedia" Título="Wikipedia" /c)mapa■

CSS

Un enfoque más moderno es superponer enlaces en una imagen utilizando el posicionamiento absoluto de CSS; sin embargo, esto solo admite áreas rectangulares en las que se puede hacer clic. Esta técnica CSS puede ser adecuada para hacer que un mapa de imagen funcione correctamente en iPhones, que pueden fallar al reescalar mapas de imagen HTML puros correctamente.

Creación y uso

Ejemplo de mapa de imagen de The Club. Hacer clic en una persona en la imagen hace que el navegador cargue el artículo apropiado.

Es posible crear mapas de imagen del lado del cliente a mano usando un editor de texto, pero hacerlo requiere que los diseñadores web sepan 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, se han diseñado muchas aplicaciones para permitir a los diseñadores web crear mapas de imágenes de forma rápida y sencilla, de la misma manera que crearían formas en un editor de gráficos vectoriales. Ejemplos de estas aplicaciones son Adobe's Dreamweaver o KImageMapEditor (para KDE) y el complemento de mapas de imágenes que se encuentra en GIMP.

Los mapas de imágenes que no hacen que sus áreas en las que se puede hacer clic sean evidentes corren el riesgo de someter al usuario a una navegación misteriosa. Incluso cuando lo hacen, a dónde conducen puede no ser obvio. Esto se puede remediar parcialmente con efectos de rollover.

Imágenes SVG

Debido a que el formato de imagen Scalable Vector Graphics (SVG) proporciona sus propios mecanismos para agregar hipervínculos y otras formas más sofisticadas de interactividad a las imágenes, las técnicas tradicionales de mapas de imágenes generalmente no son necesarias cuando se trabaja con imágenes vectoriales en formato SVG.