Generador de mapas de imagen HTML
Convierte cualquier imagen en un mapa de imagen clicable. Dibuja rectángulos, círculos y polígonos sobre las partes que quieras enlazar, añade una URL y un texto alternativo a cada área y copia el HTML clásico con <map>, una versión responsive con un pequeño script o un mapa de imagen SVG moderno.
Última actualización:
Áreas 0
Aún no hay áreas. Elige una herramienta y dibuja sobre la imagen.
Importar un <map> existente
Cómo usar Generador de mapas de imagen HTML
- Elige o suelta una imagen y escribe la ruta que tendrá en tu sitio (por ejemplo images/floor-plan.jpg).
- Elige una herramienta: Rectángulo y Círculo funcionan arrastrando; Polígono añade un punto por clic y termina cuando haces clic en el primer punto, haces doble clic o pulsas Intro.
- Completa cada área en la lista: URL del enlace, texto alternativo y un tooltip opcional, y elige si se abre en una pestaña nueva.
- Ajusta con la herramienta Seleccionar: arrastra las formas para moverlas y arrastra los tiradores cuadrados para cambiar su tamaño o su forma.
- Copia el código en el formato que necesites, o descarga una página de demostración y coloca tu imagen junto a ella.
Formas y coordenadas de un mapa de imagen
| shape | formato de coords | Ejemplo | Uso típico |
|---|---|---|---|
rect | izquierda, arriba, derecha, abajo | 60,60,320,240 | Botones, edificios, habitaciones en un plano |
circle | centro x, centro y, radio | 610,160,105 | Marcadores, iconos redondos, planetas, ruedas |
poly | x1,y1, x2,y2, … (3 esquinas o más) | 470,395,560,370,700,410 | Países, estados, objetos irregulares |
default | sin coords | <area shape="default" href="/es/"> | Enlace de reserva para el resto de la imagen (añádelo a mano) |
Cuando las áreas se solapan, el navegador usa el primer <area> que coincide en el mapa, así que pon las formas pequeñas antes que las grandes. Los números de las áreas en el editor muestran ese orden.
Un mapa de imagen mínimo
<img src="map.png" alt="Town map" usemap="#town" width="800" height="500">
<map name="town">
<area shape="rect" coords="60,60,320,240" href="/library" alt="Library">
<area shape="circle" coords="610,160,105" href="/park" alt="Park">
</map>El valor de usemap es el name del mapa precedido de #. Fijar width y height al tamaño real de la imagen mantiene las coordenadas correctas y evita saltos en el diseño.
Consejos
- Dibuja con la imagen en su tamaño final: si después recortas o redimensionas la imagen, hay que rehacer o escalar las coordenadas.
- Haz las áreas de al menos unos 44 × 44 píxeles CSS para que sean fáciles de pulsar en el teléfono.
- Da a los usuarios una pista visual de que la imagen es clicable, como etiquetas o un breve pie de foto, porque las áreas del mapa son invisibles por defecto.
- Mantén también la lista de enlaces disponible como texto normal, para los motores de búsqueda y las tecnologías de apoyo.
Preguntas frecuentes
¿Qué es un mapa de imagen HTML?
Un mapa de imagen permite que distintas zonas de una misma imagen enlacen a páginas diferentes. La etiqueta <img> recibe un atributo usemap que apunta a un elemento <map>, y cada <area> dentro del mapa define una forma clicable con su propio href, texto alternativo y coordenadas.
¿Cómo funcionan las coordenadas de area?
Las coordenadas están en píxeles de la imagen original, medidos desde su esquina superior izquierda. Un rectángulo usa x1,y1,x2,y2 (dos esquinas opuestas), un círculo usa x,y,radio y un polígono enumera cada esquina como x1,y1,x2,y2,x3,y3, y así sucesivamente.
¿Por qué mi mapa de imagen deja de funcionar al redimensionar la imagen?
Las coordenadas de area son valores fijos en píxeles, así que cuando el CSS escala la imagen (por ejemplo, max-width: 100%) las zonas clicables dejan de coincidir. Usa la salida Responsive, que recalcula las coordenadas cada vez que cambia el tamaño de la imagen, o la versión SVG, que se escala de forma natural.
¿Debo usar el mapa clásico o la versión SVG?
El mapa clásico funciona en todos los navegadores desde hace décadas y es fácil de pegar. La versión SVG se escala sin JavaScript, puede resaltar áreas al pasar el cursor con CSS y convierte cada área en un enlace normal que puede recibir el foco, lo que es mejor para quienes usan el teclado. Ambos sirven para la mayoría de los sitios.
¿Los mapas de imagen son accesibles?
Pueden serlo. Da a cada área un texto alternativo significativo que describa adónde lleva el enlace, da también un texto alternativo a la propia imagen y asegúrate de que los enlaces importantes estén disponibles además como enlaces de texto normales en algún lugar de la página, porque las áreas pequeñas pueden ser difíciles de pulsar en pantallas táctiles.
¿Se sube mi imagen a un servidor?
No. La imagen se abre localmente en tu navegador y solo se muestra en esta página. El código que copias contiene únicamente el nombre de archivo que escribiste, no la imagen.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.