La respuesta corta
¿Por qué usar Mapa de imagen?
Calcular a mano las coordenadas de una etiqueta area obliga a medir la imagen y hacer cuentas. Aquí fijas los bordes en porcentajes y la herramienta escribe las coordenadas de la imagen a tamaño completo.
Escribe el Nombre del mapa (por defecto extractpics-map) y el Enlace del área seleccionada. Después coloca el rectángulo con Izquierda, Arriba, Derecha y Abajo del área, cada uno en porcentaje de 0 a 100; los valores por defecto dejan un margen del 10 % alrededor. Al tocar Aplicar cambios, los porcentajes pasan a coordenadas en píxeles de la imagen original.
El src del código es el nombre del archivo que subiste, así que la imagen debe estar junto al HTML con ese nombre o tendrás que cambiar la ruta. El nombre del mapa se limpia a letras, números, guiones y guiones bajos. La descarga solo contiene el código, no la imagen.
Buscar coordenadas te da la x y la y exactas de un punto, útil para comprobar dónde cae un borde antes de escribir los porcentajes. Para enlazar la imagen entera y no una parte, basta con una etiqueta a alrededor del img, sin mapa. Comprueba siempre el resultado abriendo el HTML junto a la imagen en el navegador.
Dónde encaja Mapa de imagen
Banners de correo
Haz que una parte del banner de un correo HTML enlace a la página de ofertas.
Planos de recintos
Enlaza una sala de un plano a su página de reservas.
Infografías
Convierte un panel de una infografía de tamaño fijo en un enlace a su fuente.
De principio a fin
Cómo usar Mapa de imagen
- 01Toca Elegir imagen y escoge la imagen de tu página.
- 02Escribe el Nombre del mapa, el enlace y los cuatro bordes del área en porcentaje, y toca Aplicar cambios.
- 03Revisa el rectángulo rojo y toca Descargar resultado para guardar el HTML.
Qué esperar de Mapa de imagen
| Comprobar | Qué significa aquí |
|---|---|
| Entrada admitida | Imágenes JPEG, PNG, WebP, GIF, BMP, SVG y AVIF si el navegador las admite |
| Controles principales | Dimensiones del lienzo más las etiquetas, colores, datos o disposición que pide el generador |
| Salida | PNG, SVG, código HTML o un ZIP si la herramienta produce varios recursos |
| Límite de trabajo | Los lienzos generados tienen un tope de 8.000 píxeles por lado |
Antes de exportar
- Los valores por defecto dejan un margen del 10 % en cada lado.
- Las coordenadas son píxeles fijos: muestra la imagen a su tamaño natural.
- Rellena los dos atributos alt para que los lectores de pantalla nombren el enlace.
- Mantén el nombre de la imagen igual que el src del código.
Preguntas frecuentes
¿Falta algo? Pregúntanos.
¿La zona sigue alineada si la imagen cambia de tamaño en la página?
¿Puedo añadir varias zonas?
¿Se sube mi archivo?
¿Mapa de imagen es gratis?
¿Por qué falló Mapa de imagen o se ve mal?
Herramientas relacionadas
Más en Utilidades.