Hispanopedia WikiEn HTML y XHTML , un mapa de imagen es una lista de coordenadas relacionadas con una imagen específica , creada para crear hipervínculos entre diferentes áreas de la imagen y distintos destinos (a diferencia de un enlace de imagen normal, donde toda la imagen enlaza a un único destino). Por ejemplo, un mapa del mundo puede tener cada país enlazado a información adicional sobre ese país. El objetivo de un mapa de imagen es facilitar la vinculación de distintas partes de una imagen sin necesidad de dividirla en archivos de imagen separados.
Lado del servidor
Los mapas de imagen del lado del servidor se implementaron por primera vez en la versión 1.1 de Mosaic (navegador web) . [ 1 ] Estos mapas permiten que el navegador web envíe información de posición al servidor sobre dónde hace clic el usuario dentro de una imagen. Esto permite al servidor tomar decisiones píxel a píxel sobre qué contenido devolver en respuesta (los métodos posibles incluyen el uso de capas de máscara de imagen, consultas a la 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.
<a href="/imagemapper"> < img src = " image.png " ismap / > </a>Cuando el usuario haga 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 solo con texto).
Lado del cliente
Los mapas de imágenes del lado del cliente se introdujeron en HTML 3.2 y no requieren que se ejecute ninguna lógica especial 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:
- La imagen propiamente dicha, que está incrustada con la
<img>etiqueta. La etiqueta de imagen debe tener un atributo usemap, que especifica el mapa de imágenes que se utilizará para esta imagen (pueden existir varios mapas de imágenes en una misma página). - Un
<map>elemento, y dentro de este,<area>otros elementos, cada uno de los cuales define un área clicable dentro del mapa de imagen. Esto es similar a<a> tagdefinir qué URL debe abrirse para un enlace web común.titleSe puede proporcionar un atributo, que puede mostrarse como una información sobre herramientas si un usuario de escritorio coloca el puntero del ratón sobre el área. Por motivos de accesibilidad web , a menudo es importante —y en algunos casos incluso puede ser un requisito legal o contractual— proporcionar unaltatributo que describa el enlace que el software lector de pantalla puede leer, por ejemplo, a 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 está separado por una coma.
- Rectángulo: Establezca 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.66397"). Cuando un usuario hace clic en cualquier punto dentro de esta área, se le redirige a la página principal de la 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" /> </ map >CSS
Un enfoque más reciente consiste en superponer enlaces sobre una imagen mediante posicionamiento absoluto CSS ; sin embargo, esto solo admite áreas rectangulares clicables. Esta técnica CSS podría ser útil para que un mapa de imagen funcione correctamente en iPhones , que a veces no logran redimensionar correctamente los mapas de imagen HTML puros.
Creación y uso
Es posible crear mapas de imágenes del lado del cliente manualmente con un editor de texto, pero para ello los diseñadores web deben saber programar en HTML y enumerar las coordenadas de las áreas que desean superponer a la imagen. Por consiguiente, la mayoría de los mapas de imágenes programados manualmente son simples polígonos.
Dado que crear 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 manera similar a como crearían formas en un editor de gráficos vectoriales .
Los mapas de imágenes que no hacen que sus áreas clicables sean obvias 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 desplazamiento del cursor. [ 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 de interactividad más sofisticadas [ 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 formato SVG.
Véase también
Referencias
- ↑ "WWW-Talk Abr-Jun 1993: Extensión IMG para Mosaic 1.1" . 1997.webhistory.org . Consultado el 21 de enero de 2026 .
- ↑ "HTML: El lenguaje de marcado (una referencia del lenguaje HTML)" .
- ↑ "Mapas de imágenes en HTML" . AccessAbility . Universidad Estatal de Pensilvania . Consultado el 6 de octubre de 2013 .
- ↑ Flanders, Vincent (marzo de 1998). Páginas web pésimas: Aprende buen diseño observando el mal diseño . San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
- ↑ "Especificación SVG: Enlace" . Consorcio World Wide Web. 16 de agosto de 2011. Consultado el 24 de junio de 2019 .
- ↑ "Especificación SVG: Interactividad" . Consorcio World Wide Web. 16 de agosto de 2011. Consultado el 24 de junio de 2019 .