# Mapa de imágenes HTML: gráficos clicables con la etiqueta map Un mapa de imágenes HTML se refiere a gráficos o vídeos de páginas web que tienen varias áreas clicables que conducen a URL internas o externas. Las denominadas áreas sensibles a enlaces de un mapa de imagen se crean con coordenadas seleccionadas y se vinculan a URL o direcciones web asociadas. ## ¿Qué es un mapa de imágenes HTML? Los mapas de imágenes HTML son gráficos en los que se puede cliclar mejorando la facilidad de uso y la interactividad. Más concretamente, los mapas de imágenes HTML pueden utilizarse para proporcionar gráficos y vídeos en un documento [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/que-es-html/) **con varias áreas enlazadas y en las que se puede hacer clic**. Las zonas de referencia integradas pueden ser subpáginas, hipervínculos a URL internas o externas o descargas. En cuanto el usuario hace clic en los elementos enlazados, se accede al contenido deseado o se desencadenan acciones. La etiqueta `` en [HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) se utiliza para crear mapas de imágenes. Mientras que la etiqueta [`` en HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tag-img/) se utiliza para integrar el mapa de imágenes terminado. Si no quieres crear tu propio mapa de imágenes HTML, puedes utilizar **generadores de mapas de imágenes**. Con estas herramientas online, solo tienes que cargar la imagen deseada y luego establecer los enlaces deseados en las áreas de la imagen. Consejo ¿Quiere saber más sobre las **funciones y posibles aplicaciones de HTML**? Nuestro [tutorial básico de HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/aprende-html-tutorial-para-principiantes/) te ofrece una introducción rápida y sencilla a este lenguaje de marcado. ## ¿Para qué se puede utilizar un mapa de imágenes HTML? Un mapa de imágenes puede integrarse **en cualquier documento HTML** en cuanto se hayan definido las respectivas áreas de referencia. La ventaja de los mapas reside en la posibilidad de enlazar varios destinos dentro de un gráfico o vídeo. Entre los múltiples usos y ámbitos de aplicación de los mapas de imágenes HTML se pueden citar los siguientes: - Mapas con zonas de referencia clicables para regiones, ciudades, sucursales de empresas o centros de servicios - Imágenes de recetas con información adicional sobre los ingredientes mostrados - Banners publicitarios con diversos productos, categorías o servicios enlazados - Visualización de información adicional o publicidad en vídeos - Una página web como mapa de imágenes con varios elementos de navegación - Visualización de diferentes modos de juego, funciones o niveles en juegos online ## ¿Cómo se crea un mapa de imágenes HTML? Para crear un mapa de imágenes, se utiliza la etiqueta `` en HTML. Además, se debe utilizar el atributo `name` para poder hacer referencia al mapa. En otras palabras, gracias al **nombre del mapa**, el objetivo deseado puede anclarse, enlazarse y direccionarse en un gráfico o vídeo. A continuación, se ofrecen **instrucciones sobre las coordenadas de las zonas de referencia vinculadas**. Un mapa de imágenes HTML puede colocarse **en cualquier posición deseada de un documento HTML**. Para ello, se definen áreas y coordenadas (`coords`) con las que se especifica la posición, el tamaño y la forma del área de referencia. Las áreas pueden colocarse en un gráfico en forma de rectángulos, polígonos o círculos. Las coordenadas utilizadas dependen de la forma del área de referencia. Puedes utilizar el atributo HTML `` para definir **áreas individuales del mapa de imagen**. Para utilizar un mapa de imágenes, se requiere al menos un atributo `area`. Los siguientes [atributos HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/atributos-html/) pueden utilizarse para especificar las propiedades del mapa de imágenes y sus áreas de referencia individuales: - `shape`: los atributos `shape` pueden utilizarse para definir las formas de las áreas de referencia sobre las que se puede hacer clic en un gráfico. Esto puede hacerse utilizando `rect` para rectángulos, `circle` para círculos o `poly` para polígonos. La sintaxis de `rect` es `rect = x1,y1,x2,y2`. Mientras que `x1` e `y1` representan las coordenadas de la esquina superior izquierda, `x2` e `y2` definen la esquina inferior derecha. La sintaxis para `circle` es `circle = xc,yc,radio`. La sintaxis para polígonos es `poly = x1,y1,x2,y2,x3,y3 ...`. - `coords`: el atributo `coords` define las coordenadas que delimitan un área de referencia. Para ello, las áreas gráficas se marcan con píxeles, por ejemplo, utilizando un editor gráfico. - `href`: el atributo `href` permite hacer referencia a las URL y direcciones internas o externas enlazadas. - `alt`: el texto alternativo puede integrarse con el atributo `alt` si hay problemas para cargar el mapa. Esto es útil, por ejemplo, para los navegadores que solo utilizan texto o para garantizar una usabilidad accesible. - `title`: el atributo `title` integra un texto breve con información importante que se muestra cuando los usuarios pasan el ratón por encima de un área de imagen. - `img`: la etiqueta `img` puede utilizarse para integrar y mostrar un archivo de imagen en documentos HTML. ## ¿Cómo integrar un mapa de imágenes en una página HTML? Una vez concretado el mapa de imágenes, puede integrarse en una página web **en la posición deseada** utilizando la [etiqueta HTML](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/html-tags/) ``. Para direccionar el mapa de imágenes deseado y ponerlo a disposición, utiliza también el elemento ya mencionado ``. El siguiente ejemplo muestra la integración: ```html playa mar cielo ``` En este ejemplo, se han definido tres áreas para la imagen de la playa donde se puede clicar: playa, mar y cielo. Cualquiera que haga clic en estas áreas es redirigido automáticamente a las respectivas páginas de destino, que se abrirán en una nueva ventana. [![Imagen: Mapa de imágenes: imagen de ejemplo con marcas](https://www.ionos.mx/digitalguide/fileadmin/_processed_/f/3/csm_strandbild-image-map_6259bc05c8.webp "Mapa de imágenes: imagen de ejemplo con marcas")](https://www.ionos.mx/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/strandbild-image-map.jpg) En el ejemplo, las tres áreas del mapa de imágenes HTML se han definido utilizando atributos de forma (cada uno “rect”). This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/mapa-de-imagenes-html/](https://www.ionos.mx/digitalguide/paginas-web/desarrollo-web/mapa-de-imagenes-html/) for AI/LLM consumption.