{"id":31450,"date":"2024-11-12T12:39:34","date_gmt":"2024-11-12T12:39:34","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31450"},"modified":"2025-03-18T14:06:41","modified_gmt":"2025-03-18T14:06:41","slug":"mapas-de-imagenes-html","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/mapas-de-imagenes-html","title":{"rendered":"Mapas de im\u00e1genes HTML"},"content":{"rendered":"

\u00bfQu\u00e9 son los mapas de im\u00e1genes o image map?<\/span><\/h2>\n

Un mapa de imagen o image map es una funci\u00f3n de HTML que permite integrar hiperv\u00ednculos sobre diferentes secciones de una imagen sin tener que cortarla en segmentos.\n<\/p>\n

Para ello, se divide las im\u00e1genes en diferentes tama\u00f1os y formas, donde cada forma coincide con un enlace. Por ejemplo, se puede hacer coincidir un bot\u00f3n de acci\u00f3n circular con un link que, al clicar sobre \u00e9l, redirige a una p\u00e1gina o recurso.
\nLos image maps se crean a\u00f1adiendo el atributo ‘usemap’ a una etiqueta <img>, que especifica el ID de una etiqueta <map>.\n<\/p>\n

Ejemplos de uso de los mapas de im\u00e1genes<\/span><\/h2>\n

Sus usos son muy variados, ya que estos mapas admiten la creaci\u00f3n 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\u00e1sicas como botones, hasta usos m\u00e1s complejos como convertir los l\u00edmites de las diferentes regiones de un mapa en elementos en los que se puede hacer clic.\n<\/p>\n

Otro ejemplo t\u00edpico de aplicaci\u00f3n de un image map ser\u00eda una fotograf\u00eda en la que aparezcan varias personas y cada una de ellas se convierte en un elemento vinculado.\n<\/p>\n

Por otra parte, los mapas de im\u00e1genes tambi\u00e9n son una herramienta excelente con la que interactuar cuando se busca informaci\u00f3n en un sitio. Este ser\u00eda el caso del siguiente mapa interactivo de Estados Unidos creado por mapsofworld.com. Aqu\u00ed cada estado est\u00e1 vinculado a un enlace con el que se puede interactuar para acceder a m\u00e1s informaci\u00f3n sobre dicha regi\u00f3n.\n<\/p>\n

\"Mapa\n<\/p>\n

Captura de pantalla con mapa de imagen de mapsofworld.com<\/a>\n<\/p>\n

Posibles implementaciones de un mapa de imagen<\/span><\/h2>\n

Se puede implementar cualquier gr\u00e1fico como un mapa de imagen tanto del lado del servidor, como del lado del cliente.\n<\/p>\n

Sin embargo, son pocos los navegadores antiguos que no soportan mapas del lado del cliente. Adem\u00e1s, la implementaci\u00f3n de gr\u00e1ficos del lado del servidor requiere de muchos conocimientos de programaci\u00f3n \u201cserver-side\u201d. Por lo cual, los mapas del lado del servidor resultan poco pr\u00e1cticos, mientras que los del lado del cliente, pueden crearse utilizando simples etiquetas HTML.\n<\/p>\n

Mapas de im\u00e1genes del lado del cliente<\/span><\/h3>\n

Casi todas las im\u00e1genes que encontramos hoy en d\u00eda 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\u00f3n a HTML, estos gr\u00e1ficos ten\u00edan que ser renderizados a trav\u00e9s de procesos CGI, pero en la actualidad solo se necesitan las etiquetas <map> y <area>.\n<\/p>\n

El c\u00f3digo HTML que usamos para un mapa del lado del cliente se podr\u00eda ver de esta manera:\n<\/p>\n

<img src=\/images\/mapa.gif alt=\"Mapa\" border=\"0\" usemap=\"#mapa\"\/>\r\n\r\n<map name=\"Mapa\">\r\n\r\n<area shape=\"circle\" coords=\"150,150,45\" href=\"documento1.html\" alt=\"documento 1\" target=\"_ blank\"\/>\r\n\r\n<area shape=\"poly\" coords=\"3,47,45,12,105,7,140,60,120,125,12,90\" alt=\"documento 2\" href=\"documento2.html\" target=\"_ blank\"\/>\r\n\r\n<\/map><\/pre>\n
Esta muestra crea un mapa de imagen con dos \u00e1reas en las que es posible hacer clic: un c\u00edrculo y un pol\u00edgono. Los valores de las coordenadas (coords) dependen de la forma de esas \u00e1reas.\n<\/p>\n
La etiqueta <area> de los mapas de imagen HTML requiere de un conjunto de coordenadas que se convierten en el cuadro de l\u00edmites de un elemento sobre el que se puede hacer clic en el image map y admite nativamente tres formas diferentes: rect\u00e1ngulo, c\u00edrculo y pol\u00edgono.\n<\/p>\n
rect – definici\u00f3n de \u00e1reas rectangulares<\/span><\/h4>\n
Una forma rectangular necesita siempre cuatro coordenadas, una para cada una de las esquinas del rect\u00e1ngulo. Es una forma b\u00e1sica y cubre la mayor\u00eda de los casos en los que se utiliza un image map. Las formas rectangulares son f\u00e1ciles de crear y funcionan bien en todos los dispositivos.\n<\/p>\n
Un ejemplo de \u00e1rea de este tipo dentro de una etiqueta <map> es:\n<\/p>\n
<area shape=\"rect\" coords=\"15,35,250,365\" alt=\"Forma rectangular\" href=\"rectangulo.html\">\r\n<\/pre>\n
El patr\u00f3n para las coordenadas es x1,y1,x2,y2. La esquina superior izquierda del mapa de la imagen se considera 0,0.\n<\/p>\n
circle – definici\u00f3n de c\u00edrculo<\/span><\/h4>\n
Una forma circular es aquella que requiere de tres coordenadas y crea un elemento circular sobre el que se puede hacer clic. Esto podr\u00eda usarse, por ejemplo, en una foto del sistema solar para crear enlaces cliqueables para cada planeta.\n<\/p>\n
Un ejemplo de un \u00e1rea circular dentro de una etiqueta <map> se ver\u00eda as\u00ed:\n<\/p>\n
<area shape=\"circle\" coords=\"90,58,3\" alt=\"Forma circular\" href=\"circulo.html\">\r\n<\/pre>\n
El patr\u00f3n para las coordenadas es x,y,radio. Las coordenadas x,y especifican el centro del c\u00edrculo.\n<\/p>\n
poly – definici\u00f3n de un pol\u00edgono<\/span><\/h4>\n
Las formas poligonales permiten convertir una geometr\u00eda m\u00e1s compleja en elementos en los que se puede hacer clic. Tiene el mismo formato que el rect\u00e1ngulo, 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\u00f1ar formas muy intrincadas para los enlaces.\n<\/p>\n
Un ejemplo de \u00e1rea triangular creada con la forma de pol\u00edgono dentro de una etiqueta <map> quedar\u00eda de este modo:\n<\/p>\n
<area shape=\"polygon\" coords=\"193,39 161,91 226,91 193,39\" alt=\"Forma triangular\" href=\"triangulo.html\">\r\n<\/pre>\n
Crear un mapa de imagen con JavaScript<\/span><\/h3>\n
Por ser un elemento HTML que reside dentro del DOM, un image map tambi\u00e9n puede ser manipulado con JavaScript. Se les puede asignar atributos ID y <class>, que funcionan con selectores de JavaScript, y tambi\u00e9n admiten eventos onMouseOver y onMouseOut, que permiten incluir funciones de JavaScript.\n<\/p>\n
Ventajas y desventajas de un image map<\/span><\/h3>\n
La ventaja m\u00e1s evidente es que los mapas de im\u00e1genes 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 \u00e1reas interactivas dentro de una sola imagen, en lugar de obligar a las y los desarrolladores a dividirla y cargar varias vistas m\u00e1s peque\u00f1as.\n<\/p>\n
Lamentablemente, como las etiquetas <area> toman las coordenadas en unidades de p\u00edxeles fijas, los mapas de im\u00e1genes no son responsivos por defecto. Esto significa que no funcionar\u00e1n en todos los tipos de dispositivos, sean peque\u00f1os o grandes, computadoras o smartphones. No obstante, podemos disponer de varias posibles soluciones para este problema.\n<\/p>\n
Existen plugins de JavaScript que se pueden a\u00f1adir a los proyectos y que ayudan a que los image maps sean compatibles. Tambi\u00e9n es posible producir varios mapas para las distintas resoluciones de pantalla principales y mostrar \u00fanicamente el relevante para cada caso en particular, ocultando los dem\u00e1s. El problema de este enfoque es que siempre a\u00f1ade una sobrecarga al proyecto.\n<\/p>\n
Un m\u00e9todo alternativo y cada vez m\u00e1s utilizado por las y los desarrolladores web, es emplear SVG (gr\u00e1ficos vectoriales escalables)<\/a> para su creaci\u00f3n.\n<\/p>\n
Los SVG son im\u00e1genes vectoriales, por lo tanto responden de forma nativa y funcionan bien en muchas resoluciones diferentes por defecto. Tambi\u00e9n son generados por c\u00f3digo y cada elemento de una imagen SVG puede ser referenciado en c\u00f3digo, como JavaScript.\n<\/p>\n
Adem\u00e1s, admiten caracter\u00edsticas m\u00e1s avanzadas que los de tipo HTML: cada elemento \u00fanico puede animarse, moverse y, en general, es mucho m\u00e1s flexible. Las y los desarrolladores pueden cambiar sus caracter\u00edsticas como la interactividad, sus formas, los colores y mucho m\u00e1s mediante la programaci\u00f3n en gr\u00e1ficos vectoriales escalables.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n