Cómo usar
- Sube o arrastra una imagen para usarla como base de tu mapa de imagen clicable.
- Elige la herramienta de rectángulo, círculo o polígono y dibuja las áreas sobre las partes que quieras enlazar.
- Selecciona cada área para definir su URL de enlace, texto alternativo, título y si se abre en una pestaña nueva.
- Copia el código HTML de <map> y <area> generado o descárgalo como un archivo .html listo para usar.
Preguntas frecuentes
¿Qué es un mapa de imagen HTML?
Un mapa de imagen HTML permite que distintas regiones de una misma imagen enlacen a destinos diferentes. Usa una etiqueta <img> con el atributo usemap más un elemento <map> con etiquetas <area>, una zona clicable por hotspot. Esta herramienta dibuja esas áreas de forma visual y escribe los coords exactos por ti.
¿Qué formatos de imagen puedo usar?
Puedes usar cualquier formato que tu navegador pueda mostrar, incluidos JPG, PNG, WebP y GIF. La herramienta lee las dimensiones reales en píxeles de la imagen para que las coordenadas exportadas coincidan exactamente con la imagen.
¿Se sube mi imagen o se mantiene privada?
Tu imagen nunca se sube. Todo el generador de mapas de imagen funciona 100% en tu navegador, por lo que la imagen y el HTML que creas permanecen en tu dispositivo y no se envía nada a ningún servidor.
¿Qué formas puedo dibujar como áreas clicables?
Puedes dibujar rectángulos, círculos y polígonos. Los rectángulos y círculos se dibujan arrastrando, y los polígonos se construyen haciendo clic en cada punto y luego doble clic (o pulsando Enter) para cerrar la forma. Cada área exporta los atributos shape y coords correctos.
¿Puedo definir enlaces, texto alternativo y abrir áreas en una pestaña nueva?
Sí. Para cada área puedes definir la URL del enlace (href), el texto alternativo, un título de tooltip y el destino. Elegir abrir en una pestaña nueva establece target="_blank" y añade automáticamente rel="noopener" por seguridad.
¿Cómo hago que el mapa de imagen sea responsive?
Activa la opción responsive y el código exportado añade un pequeño script junto con atributos data-coords que reescalan las coordenadas de las áreas cada vez que la imagen cambia de tamaño. También puedes incrustar la imagen como data URI para que el fragmento funcione como un bloque autónomo.
Acerca de esta herramienta
Generador de mapas de imagen online y gratis: sube una imagen, dibuja zonas rectangulares, circulares y poligonales, añade enlaces y copia o descarga el código HTML usemap. 100% en tu navegador, sin subidas.