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 con diferentes destinos (a diferencia de un vínculo de imagen normal, en el que toda el área de la imagen se vincula a un único destino). Por ejemplo, un mapa del mundo puede tener cada país hipervinculado a más información sobre ese país. La intención de un mapa de imagen es proporcionar una forma sencilla de vincular varias partes de una imagen sin dividir la imagen en archivos de imagen separados.
Los mapas de imágenes del lado del servidor se admitieron por primera vez en la versión 1.1 de Mosaic (navegador web) . [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 base de datos o archivos de configuración en el servidor).
El código HTML para este tipo de mapa de imágenes del lado del servidor requiere que la <img>etiqueta esté dentro de una etiqueta de anclaje <a>...</a>y <img>debe incluir el ismapatributo.
< a href = "/imagemapper" >< img src = "imagen.png" ismap /></ a >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 de anclaje como una cadena de consulta y accederá a la URL resultante [2] (por ejemplo, /imagemapper?3,9).
Si el navegador no lo admite , no se debe agregar ismapla cadena de consulta a la URL de anclaje y el servidor debe responder adecuadamente (por ejemplo, devolviendo una página de navegación de solo texto).
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 .
Un mapa de imágenes del lado del cliente en HTML consta de dos partes:
<img>etiqueta. La etiqueta de imagen debe tener un atributo usemap, que indica el mapa de imagen que se utilizará para esta imagen (pueden existir varios mapas de imagen en una sola página).<map>elemento y, dentro de él, <area>elementos, cada uno de los cuales define una única área en la que se puede hacer clic dentro del mapa de imágenes. Son similares a la <a> tagdefinición de qué URL debe abrirse para un enlace web normal. titleSe puede proporcionar un atributo, que puede mostrarse como una información sobre herramientas si un usuario de escritorio pasa el puntero del ratón sobre el área. Por razones de accesibilidad web , a menudo es importante (y en algunos casos incluso puede ser un requisito legal o contractual) proporcionar un altatributo que describa el enlace que el software de lectura de pantalla puede leer, por ejemplo, para usuarios ciegos . [3]Los <area>elementos 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 un valor Y (desde la izquierda/parte superior de una imagen) y se separan con una coma.
El siguiente ejemplo define un área rectangular ("9,372,66,397"). Cuando un usuario hace clic en cualquier parte dentro de esta área, se lo dirige a la página de inicio de Wikipedia en inglés .
< img src = "image.png" alt = "Mapa del sitio web" usemap = "#mapname" /> < map name = "mapname" > < area shape = "rect" coords = "9,372,66,397" href = "https://en.wikipedia.org/" alt = "Wikipedia" title = "Wikipedia" /> </ map >Un enfoque más reciente consiste en superponer enlaces en una imagen mediante posicionamiento absoluto CSS ; sin embargo, esto solo admite áreas rectangulares en las que se puede hacer clic. Esta técnica CSS puede ser adecuada para que un mapa de imágenes funcione correctamente en iPhones , que pueden no poder reescalar correctamente los mapas de imágenes HTML puros.
Es posible crear mapas de imágenes del lado del cliente a mano utilizando un editor de texto, pero para ello es necesario 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 forma muy similar a como crearían formas en un editor de gráficos vectoriales . Ejemplos de estas aplicaciones son Dreamweaver o KImageMapEditor (para KDE ) de Adobe, y el complemento de mapas de imágenes que se encuentra en GIMP . La suite ofimática gratuita y de código abierto LibreOffice también incluye un editor de mapas de imágenes dedicado. [4]
Los mapas de imágenes que no hacen evidentes las áreas en las que se puede hacer clic corren el riesgo de someter al usuario a una navegación misteriosa . Incluso cuando lo hacen, es posible que no resulte obvio adónde conducen. Esto se puede remediar parcialmente con efectos de desplazamiento. [5]
Debido a que el formato de imagen Scalable Vector Graphics (SVG) proporciona sus propios mecanismos para agregar hipervínculos [6] y otras formas más sofisticadas de interactividad [7] 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.