Generador de image maps en JSON

Carga una imagen, marca zonas clicables con rectangulos, circulos o poligonos y exporta coordenadas listas para usar.

Imagen local o por URL Dibuja areas interactivas y obten el JSON del mapeo en segundos.
1

Selecciona la imagen

Primero carga una imagen. Cuando este lista, se abrira el editor para dibujar areas.

URL Cargar desde un link Pega una direccion publica de imagen para mapearla.

Todavia no hay imagen cargada.

2

Editar areas y generar JSON

Dibuja sobre la imagen, configura cada area y copia el resultado final.

Dibujar areas

Modo crear: elige una forma y dibuja sobre la imagen. Para poligonos, haz clic en cada punto y termina con el boton.

Carga una imagen para empezar Luego dibuja rectangulos, circulos o poligonos sobre ella.
Imagen para mapear

Codigo JSON y HTML

El JSON y el HTML se actualizan automaticamente con coordenadas en pixeles reales de la imagen.

JSON

HTML <map>

Importar JSON existente

Pega un JSON generado antes o sube un archivo para volver a editar el mapeo.

Guia rapida

Como funciona

Primero selecciona una imagen desde tu equipo o pega la URL de una imagen online. Cuando la imagen este cargada, usa las herramientas del panel derecho para dibujar rectangulos, circulos o poligonos sobre las zonas que quieres convertir en areas interactivas.

Cada area puede tener un link, un titulo, un target y un estado activo. El codigo JSON se actualiza automaticamente con las coordenadas reales de la imagen, para que puedas copiarlo o descargarlo y usarlo en tu sitio, aplicacion o flujo de datos.

Concepto

Que es mapeo de imagen

El mapeo de imagen permite definir zonas especificas dentro de una imagen para asociarlas con una accion, como abrir un enlace, mostrar informacion o identificar una parte concreta del contenido visual.

En lugar de tratar toda la imagen como un unico elemento, un image map divide la imagen en areas con coordenadas. Esto es util para mapas, planos, catalogos, infografias, diagramas, productos con partes clicables y cualquier imagen donde cada region necesite un comportamiento propio.