Generador de mapas de imagen: dibuja áreas clicables y obtén el HTML | We.Inc
Dibuja rectángulos, círculos y polígonos sobre tu propia imagen, asigna a cada uno un enlace y texto alt, y copia el HTML clásico de map y area o una versión SVG responsive.
Generador de mapas de imagen
Un mapa de imagen convierte partes de una misma imagen en enlaces separados. Carga una imagen, arrastra para dibujar rectángulos o círculos, haz clic en puntos para crear polígonos y escribe un enlace y un texto alt para cada área. Copia el HTML clásico de map y area, o una versión SVG responsive cuyas áreas se reducen con la imagen en los móviles.
Formas de area y sus coords
Significado
Esquinas superior izquierda e inferior derecha
Centro y radio
Cada esquina en orden; la forma se cierra sola
(ninguna)
Todo lo que no cubre otra área
Los planos de planta, los diagramas de producto, las fotos de equipo y los mapas suelen necesitar varios enlaces dentro de una misma imagen. Dibujar las áreas a ojo es mucho más rápido que medir píxeles, y tu imagen nunca sale de tu ordenador: se lee en el navegador y solo se usa su tamaño en el código.
Usa el plano de ejemplo o elige tu propio archivo de imagen. Las coordenadas se miden en los píxeles reales de la imagen, aunque la vista previa esté reducida.
Elige Rectángulo o Círculo y arrastra sobre la imagen, o elige Polígono, haz clic en cada esquina y pulsa Terminar polígono.
Edita el enlace, el texto alt y las coordenadas de cada área en la lista. Las coordenadas que escribes actualizan el dibujo, lo que también permite crear un mapa solo con el teclado.
Copia el HTML clásico o el SVG responsive. Sustituye la ruta de la imagen en el código por la ubicación del archivo en tu sitio.
Cada área con href necesita texto alt. Es lo que anuncian los lectores de pantalla, así que escribe el destino, por ejemplo Reservar mesa en la cafetería.
Las coordenadas de un mapa de imagen clásico son píxeles CSS fijos. Si el CSS reduce la imagen en los móviles, las áreas se quedan donde estaban, así que usa la salida SVG para diseños fluidos.
Haz que las zonas clicables sean lo bastante grandes para tocarlas con comodidad, y evita áreas que se toquen sin separación.
No escondas la única ruta hacia una página dentro de una imagen. Repite los enlaces importantes como texto normal en algún lugar cercano.
Preguntas frecuentes
¿Cómo conecto el mapa con la imagen?
Pon un nombre al map y luego asigna a usemap del img ese mismo nombre precedido de #, por ejemplo usemap="#site-map" y map name="site-map". El generador escribe ambos por ti.
¿Los mapas de imagen HTML son responsive?
No por sí solos. Las coordenadas son números de píxeles CSS, así que no siguen a una imagen que el CSS redimensiona. La salida SVG lo resuelve con un viewBox, que escala la imagen y las formas de los enlaces a la vez.
¿Se sube mi imagen?
No. El archivo se abre con una URL de objeto local para que el navegador pueda mostrarlo y leer su ancho y su alto. No se envía nada a We.Inc ni a nadie más.
¿Las áreas pueden superponerse?
Sí. Donde dos áreas se superponen, gana el clic la que aparece primero en el map, así que coloca las áreas pequeñas antes que las grandes que las rodean.
Map clásico o enlaces SVG
La pareja map y area lleva décadas funcionando en los navegadores y mantiene la imagen como un img normal, lo que resulta sencillo para las herramientas de contenido. Su punto débil son las coordenadas fijas.
La versión SVG dibuja la imagen dentro de un elemento svg y envuelve cada forma en un enlace. Como todo comparte un mismo viewBox, las áreas escalan a la perfección, y puedes añadir un contorno al pasar el ratón con CSS sobre las formas.
Imágenes clicables accesibles
Da a la propia imagen un texto alt que describa la imagen completa, y a cada área un texto alt que nombre su destino. Quienes usan el teclado pueden recorrer las áreas con Tab en el orden del código, así que ordénalas en un orden de lectura lógico.
Pruébalo recorriendo el resultado con Tab. Si el orden del foco salta por la imagen, reordena las filas de la lista antes de copiar.
Código del plano de ejemplo
Estas son las dos salidas que escribe el generador para las cuatro áreas de ejemplo.
map y area clásicos
Funciona en todas partes con el tamaño natural de la imagen, 600 por 360 píxeles.
Enlaces SVG responsive
El viewBox coincide con el tamaño de la imagen, así que cada forma de enlace escala con la imagen.
Área {n}
Dibuja tus áreas
Dibuja rectángulos, círculos y polígonos sobre el plano de ejemplo o tu propia imagen, y luego define un enlace y un texto alt para cada área.
Tu imagen
Herramienta de dibujo
Rectángulo
Círculo
Polígono
Terminar polígono
Cancelar
Tamaño de la imagen: {w} × {h} píxeles.
Haz clic en cada esquina y luego en Terminar polígono.