Generador de Image Map HTML
Crea zonas clicables sobre imágenes. Rect, circle y poly. Undo/redo, snap to grid, zoom. Exporta HTML o JSON.
Sube una imagen para empezar a dibujar áreas
JPG, PNG, WebP, GIF, SVG
Hecho por
Miguel Ángel Colorado Marin
Hecho por
Miguel Ángel Colorado Marin
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
Cómo crear un mapa de imagen
- 1
Sube tu imagen
JPG, PNG, WebP, GIF o SVG. La imagen se carga en el canvas interactivo con zoom y scroll.
- 2
Dibuja áreas sobre la imagen
Elige Rect, Círculo o Polígono y dibuja directamente sobre la imagen. Usa snap to grid para precisión pixel y zoom para detalles pequeños.
- 3
Edita href, alt y title de cada área
Tras dibujar, edita las propiedades de cada zona clicable. El panel lateral permite editar sin necesidad de redibujar.
- 4
Exporta y usa el código
Copia el HTML generado (img + map + area) o el JSON. Descarga si prefieres guardar el archivo.
Casos de uso de los image maps HTML
Los mapas de imagen HTML son una técnica nativa del estándar que permite definir múltiples zonas clicables sobre una misma imagen, cada una con su propio enlace, texto alternativo y tooltip. Son especialmente útiles para mapas geográficos interactivos, diagramas de arquitectura o infraestructura con zonas enlazables, infografías con secciones navegables, menús visuales en interfaces de juego o aplicaciones.
A diferencia de las soluciones JavaScript que superponen elementos div sobre la imagen, los image maps HTML son parte del DOM y accesibles por defecto para lectores de pantalla. El atributo alt de cada <area> se convierte en el texto descriptivo que los lectores de pantalla anuncian al navegar con teclado, haciendo que la solución sea semánticamente correcta y compatible con las guías WCAG.
Preguntas frecuentes
¿Qué es un image map HTML?
Una imagen con múltiples zonas clicables, cada una con su propio enlace. Se define con usemap en <img> y un elemento <map> con <area> que especifican coordenadas y URLs de cada zona.
¿Qué formas soporta?
Las tres del estándar HTML: rect (x1,y1,x2,y2), circle (cx,cy,radio) y poly (pares x,y de cada vértice). Los polígonos permiten crear áreas de cualquier forma.
¿Las coordenadas son relativas o absolutas?
Absolutas en píxeles del tamaño natural de la imagen. Para imágenes responsivas que cambian de tamaño con CSS, las coordenadas no se adaptan automáticamente — necesitarías JavaScript adicional.
¿Para qué sirve el alt en cada área?
Para accesibilidad. Los lectores de pantalla lo usan para describir el destino del enlace a usuarios con discapacidad visual. Es buena práctica (y en algunos contextos legal) incluirlo siempre.
¿Puedo exportar como JSON?
Sí. El modo JSON exporta un array con las propiedades de cada área (shape, coords, href, alt, title). Útil para React, Vue u otros frameworks donde construyes el HTML dinámicamente.
Herramientas relacionadas
Embebe esta herramienta
<iframe src="https://miguelacm.es/embed/image-map-generator" width="100%" height="750" style="border:none;border-radius:16px;" loading="lazy"></iframe>