Mapa de imagen

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 se vincula a un solo 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.

Del 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. ^[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 posibles métodos son utilizar 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 imagen del lado del servidor requiere que la <img>etiqueta esté dentro de una etiqueta de anclaje <a>...</a>y <img>debe incluir el ismapatributo.

< Un  href = "/ Imagemapper" > < img  src = "image.png"  ismap  /> </ una >

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 ismap, la cadena de consulta no debe agregarse a la URL de anclaje y el servidor debe responder de manera adecuada (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 con la <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).
2. Un <map>elemento, y dentro de él, <area>elementos, cada uno de los cuales define un área en la que se puede hacer clic dentro del mapa de imágenes. Son similares a <a> tagdefinir qué URL se debe abrir para un enlace web normal. Se titlepuede proporcionar un atributo, 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 , 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 de X e Y (desde la izquierda / arriba de una imagen) y está separado por una coma.

• Rectángulo: establece cuatro coordenadas: x1, y1, x2, y2
• Polígono: establece tantas coordenadas como quieras (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 le 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 >

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 imágenes funcione correctamente en iPhones , que pueden fallar al cambiar la escala de mapas de imágenes HTML puros correctamente.

Creación y uso

Ejemplo de mapa de imagen de The Club . Al hacer clic en una persona en la imagen, el navegador carga el artículo correspondiente.

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 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 que los diseñadores web creen mapas de imágenes de forma rápida y sencilla, de la misma forma que 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 mapa 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 obvias corren el riesgo de someter al usuario a una navegación misteriosa . Incluso cuando lo hacen, puede que no sea obvio adónde conducen. Esto se puede remediar parcialmente con efectos de vuelco. ^[4]

Imágenes SVG

Debido a que el formato de imagen Scalable Vector Graphics (SVG) proporciona sus propios mecanismos para agregar hipervínculos ^[5] y otras formas más sofisticadas de interactividad ^[6] 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.

Ver también

• Navegación de carne misteriosa

Referencias

1. "Extensión IMG para Mosaic 1.1" .
2. "HTML: el lenguaje de marcado (una referencia del lenguaje HTML)" .
3. "Mapas de imágenes en HTML" . AccessAbility . Universidad Penn State . Consultado el 6 de octubre de 2013 .
4. Flanders, Vincent (marzo de 1998). Páginas web que apestan: aprenda el buen diseño observando el mal diseño . San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
5. "Especificación SVG: vinculación" . Consorcio Mundial de la red. 16 de agosto de 2011 . Consultado el 24 de junio de 2019 .
6. "Especificación SVG: interactividad" . Consorcio Mundial de la red. 16 de agosto de 2011 . Consultado el 24 de junio de 2019 .