Mapas de imágenes HTML
Contenido
¿Qué son los mapas de imágenes o image map?
Un mapa de imagen o image map es una función de HTML que permite integrar hipervínculos sobre diferentes secciones de una imagen sin tener que cortarla en segmentos.
Para ello, se divide las imágenes en diferentes tamaños y formas, donde cada forma coincide con un enlace. Por ejemplo, se puede hacer coincidir un botón de acción circular con un link que, al clicar sobre él, redirige a una página o recurso. Los image maps se crean añadiendo el atributo 'usemap' a una etiqueta <img>, que especifica el ID de una etiqueta <map>.
Ejemplos de uso de los mapas de imágenes
Sus usos son muy variados, ya que estos mapas admiten la creación de enlaces en una gran variedad de formas, por lo que a menudo ayudan a desarrollar proyectos creativos. Por ejemplo, se puede vincular desde un enlace accionable con formas básicas como botones, hasta usos más complejos como convertir los límites de las diferentes regiones de un mapa en elementos en los que se puede hacer clic.
Otro ejemplo típico de aplicación de un image map sería una fotografía en la que aparezcan varias personas y cada una de ellas se convierte en un elemento vinculado.
Por otra parte, los mapas de imágenes también son una herramienta excelente con la que interactuar cuando se busca información en un sitio. Este sería el caso del siguiente mapa interactivo de Estados Unidos creado por mapsofworld.com. Aquí cada estado está vinculado a un enlace con el que se puede interactuar para acceder a más información sobre dicha región.
Captura de pantalla con mapa de imagen de mapsofworld.com
Posibles implementaciones de un mapa de imagen
Se puede implementar cualquier gráfico como un mapa de imagen tanto del lado del servidor, como del lado del cliente.
Sin embargo, son pocos los navegadores antiguos que no soportan mapas del lado del cliente. Además, la implementación de gráficos del lado del servidor requiere de muchos conocimientos de programación “server-side”. Por lo cual, los mapas del lado del servidor resultan poco prácticos, mientras que los del lado del cliente, pueden crearse utilizando simples etiquetas HTML.
Mapas de imágenes del lado del cliente
Casi todas las imágenes que encontramos hoy en día en la web son un image map del lado del cliente, es decir, aquellos que se renderizan en el navegador. Antiguamente, antes de su incorporación a HTML, estos gráficos tenían que ser renderizados a través de procesos CGI, pero en la actualidad solo se necesitan las etiquetas <map> y <area>.
El código HTML que usamos para un mapa del lado del cliente se podría ver de esta manera:
<img src=/images/mapa.gif alt="Mapa" border="0" usemap="#mapa"/> <map name="Mapa"> <area shape="circle" coords="150,150,45" href="documento1.html" alt="documento 1" target="_ blank"/> <area shape="poly" coords="3,47,45,12,105,7,140,60,120,125,12,90" alt="documento 2" href="documento2.html" target="_ blank"/> </map>
Esta muestra crea un mapa de imagen con dos áreas en las que es posible hacer clic: un círculo y un polígono. Los valores de las coordenadas (coords) dependen de la forma de esas áreas.
La etiqueta <area> de los mapas de imagen HTML requiere de un conjunto de coordenadas que se convierten en el cuadro de límites de un elemento sobre el que se puede hacer clic en el image map y admite nativamente tres formas diferentes: rectángulo, círculo y polígono.
rect - definición de áreas rectangulares
Una forma rectangular necesita siempre cuatro coordenadas, una para cada una de las esquinas del rectángulo. Es una forma básica y cubre la mayoría de los casos en los que se utiliza un image map. Las formas rectangulares son fáciles de crear y funcionan bien en todos los dispositivos.
Un ejemplo de área de este tipo dentro de una etiqueta <map> es:
<area shape="rect" coords="15,35,250,365" alt="Forma rectangular" href="rectangulo.html">
El patrón para las coordenadas es x1,y1,x2,y2. La esquina superior izquierda del mapa de la imagen se considera 0,0.
circle - definición de círculo
Una forma circular es aquella que requiere de tres coordenadas y crea un elemento circular sobre el que se puede hacer clic. Esto podría usarse, por ejemplo, en una foto del sistema solar para crear enlaces cliqueables para cada planeta.
Un ejemplo de un área circular dentro de una etiqueta <map> se vería así:
<area shape="circle" coords="90,58,3" alt="Forma circular" href="circulo.html">
El patrón para las coordenadas es x,y,radio. Las coordenadas x,y especifican el centro del círculo.
poly - definición de un polígono
Las formas poligonales permiten convertir una geometría más compleja en elementos en los que se puede hacer clic. Tiene el mismo formato que el rectángulo, pero en lugar de dos conjuntos de coordenadas, se repite indefinidamente. Cada coordenada representa un nodo, que se enlaza con el espacio interior resultante convertido en un elemento cliqueable. Este tipo de formas pueden utilizarse para diseñar formas muy intrincadas para los enlaces.
Un ejemplo de área triangular creada con la forma de polígono dentro de una etiqueta <map> quedaría de este modo:
<area shape="polygon" coords="193,39 161,91 226,91 193,39" alt="Forma triangular" href="triangulo.html">
Crear un mapa de imagen con JavaScript
Por ser un elemento HTML que reside dentro del DOM, un image map también puede ser manipulado con JavaScript. Se les puede asignar atributos ID y <class>, que funcionan con selectores de JavaScript, y también admiten eventos onMouseOver y onMouseOut, que permiten incluir funciones de JavaScript.
Ventajas y desventajas de un image map
La ventaja más evidente es que los mapas de imágenes son una buena manera de crear elementos interactivos en Internet. Los elementos <map> y <area> generalmente son compatibles y funcionan en todos los navegadores principales, permitiendo generar varias áreas interactivas dentro de una sola imagen, en lugar de obligar a las y los desarrolladores a dividirla y cargar varias vistas más pequeñas.
Lamentablemente, como las etiquetas <area> toman las coordenadas en unidades de píxeles fijas, los mapas de imágenes no son responsivos por defecto. Esto significa que no funcionarán en todos los tipos de dispositivos, sean pequeños o grandes, computadoras o smartphones. No obstante, podemos disponer de varias posibles soluciones para este problema.
Existen plugins de JavaScript que se pueden añadir a los proyectos y que ayudan a que los image maps sean compatibles. También es posible producir varios mapas para las distintas resoluciones de pantalla principales y mostrar únicamente el relevante para cada caso en particular, ocultando los demás. El problema de este enfoque es que siempre añade una sobrecarga al proyecto.
Un método alternativo y cada vez más utilizado por las y los desarrolladores web, es emplear SVG (gráficos vectoriales escalables) para su creación.
Los SVG son imágenes vectoriales, por lo tanto responden de forma nativa y funcionan bien en muchas resoluciones diferentes por defecto. También son generados por código y cada elemento de una imagen SVG puede ser referenciado en código, como JavaScript.
Además, admiten características más avanzadas que los de tipo HTML: cada elemento único puede animarse, moverse y, en general, es mucho más flexible. Las y los desarrolladores pueden cambiar sus características como la interactividad, sus formas, los colores y mucho más mediante la programación en gráficos vectoriales escalables.
Ampliar conocimientos
- https://tecnonautas.net/cuales-son-los-beneficios-y-desventajas-del-uso-de-los-mapas-de-imagenes/
- https://desarrolloweb.com/articulos/753.php
| Sobre las autoras y autores: |
 |