Tienes un mapa, un diagrama o una infografía y necesitas que distintas zonas de esa misma imagen lleven a enlaces distintos: cada país de un mapa a su página correspondiente, cada sala de un plano a su descripción. La etiqueta HTML <map> con áreas clicables (usemap) resuelve esto desde los primeros años de la web, pero calcular las coordenadas exactas de cada zona a mano, con lápiz y calculadora sobre una imagen, es un método que nadie debería seguir usando en 2026.
Qué es un image map, en corto
Un image map es una imagen HTML sobre la que se definen zonas invisibles clicables, cada una con su propia forma (rectángulo, círculo o polígono) y su propio destino de enlace. A diferencia de trocear la imagen en varias imágenes separadas (una solución más torpe y con peor rendimiento), un image map usa una única imagen con las coordenadas de cada zona definidas en el HTML.
Las tres formas de zona disponibles
- Rectángulo (rect): definido por dos coordenadas de esquina, la forma más simple y habitual para zonas rectangulares como botones o secciones cuadradas de una imagen.
- Círculo (circle): definido por un centro y un radio, ideal para zonas circulares como iconos o puntos de interés en un mapa.
- Polígono (poly): definido por una serie de puntos que forman un contorno irregular, necesario para zonas con forma no geométrica, como el contorno real de un país en un mapa.
Cómo crear un image map visualmente
- Sube la imagen sobre la que quieres definir las zonas.
- Dibuja cada zona directamente sobre la imagen, eligiendo la forma correspondiente (rectángulo, círculo o polígono).
- Asigna un enlace a cada zona.
- Ajusta con precisión usando zoom y snap to grid si necesitas alinear zonas de forma exacta.
- Exporta el resultado como código HTML o como JSON.
Puedes hacerlo gratis con el generador de image map de esta web.
Por qué dibujar visualmente es tan superior a escribir coordenadas a mano
Las coordenadas de un image map (por ejemplo, coords="34,44,270,350" para un rectángulo) no significan nada intuitivo mirándolas directamente: hay que calcular exactamente dónde caen esos píxeles sobre la imagen real, y un error de unos pocos píxeles hace que la zona clicable quede desalineada del elemento visual que representa. Dibujar la zona directamente sobre la imagen, viendo el resultado en tiempo real, elimina por completo ese proceso de cálculo y verificación manual.
Por qué el undo/redo y el snap to grid importan más de lo que parece
Definir zonas complejas (especialmente polígonos con muchos puntos) casi siempre implica ajustes y correcciones sobre la marcha. Poder deshacer un punto mal colocado sin tener que rehacer toda la zona desde cero, y poder alinear puntos automáticamente a una cuadrícula cuando se necesita precisión geométrica, son las diferencias prácticas entre una herramienta cómoda de usar y una frustrante.
Casos de uso reales
- Mapas interactivos: cada región o país lleva a contenido específico.
- Planos de edificios o eventos: cada sala o stand lleva a su información correspondiente.
- Infografías con múltiples puntos de interés: cada elemento visual de la infografía enlaza a una fuente o detalle ampliado.
- Diagramas técnicos: cada componente de un diagrama lleva a su documentación específica.
Preguntas frecuentes
¿En qué formatos puedo exportar el resultado? HTML (listo para insertar con la etiqueta <map>) o JSON (para procesarlo con tu propio código).
¿Puedo editar una zona después de haberla creado? Sí, con undo/redo puedes corregir errores sin rehacer la zona completa.
¿Funciona bien en pantallas de distinto tamaño (responsive)? El image map se basa en coordenadas fijas sobre la imagen original; para diseños completamente responsive, conviene revisar cómo se comporta la imagen en distintos tamaños de pantalla.
¿Se sube mi imagen a algún servidor? No, todo el proceso ocurre en tu navegador.
Crea zonas clicables sobre cualquier imagen gratis con el generador de image map, con rectángulos, círculos, polígonos y exportación a HTML o JSON.