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 único destino). Por ejemplo, un mapa del mundo puede tener cada país vinculado a más información sobre ese país. La intención de un mapa de imágenes es proporcionar una manera fácil 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 fueron compatibles por primera vez con Mosaic (navegador web) versión 1.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 al servidor tomar decisiones píxel por píxel sobre qué contenido devolver en respuesta (los métodos posibles son utilizar 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 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 = "image.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, ismapentonces 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).
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 ningún 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 nombra el mapa de imágenes que se utilizará para esta imagen (pueden existir varios mapas de imágenes en una sola página).<map>elemento, y dentro de él, <area>elementos, cada uno de los cuales define un área única en la que se puede hacer clic dentro del mapa de imagen. Son similares a <a> tagdefinir qué URL debe abrirse para un enlace web normal. Se puede proporcionar un titleatributo, que se puede representar como información sobre herramientas si un usuario de escritorio pasa el puntero del mouse sobre el área. Por razones de accesibilidad web , suele ser importante (y en algunos casos puede ser incluso un requisito legal o contractual) proporcionar un altatributo que describa el enlace que el software lector 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 e Y (desde la izquierda/arriba de una imagen) y está separado por una coma.
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 dirige a la página de inicio de Wikipedia en inglés .
< img src = "image.png" alt = "Mapa del sitio web" usemap = "#mapname" /> < nombre del mapa = "nombre del mapa" > < forma del área = "rect" coords = "9,372,66,397" href = "https: //en.wikipedia.org/" alt = "Wikipedia" title = "Wikipedia" /> </ mapa > Un enfoque más reciente consiste en superponer enlaces en una imagen utilizando 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 hacer que un mapa de imágenes funcione correctamente en iPhones , que pueden no lograr reescalar correctamente los mapas de imágenes HTML puro.
Es posible crear mapas de imágenes del lado del cliente a mano usando un editor de texto, pero hacerlo requiere que los diseñadores web sepan codificar HTML y 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 de Adobe o KImageMapEditor (para KDE ) y el complemento de mapas de imágenes que se encuentra en GIMP . LibreOffice, la suite ofimática gratuita y de código abierto, también incluye un editor ImageMap dedicado. [4]
Los mapas de imágenes que no hacen obvias 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, puede que no sea obvio hacia dónde conducen. Esto se puede solucionar parcialmente con efectos de rollover. [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 SVG. formato.