Mapas de imagen HTML

El elemento Picture elige entre archivos de imagen. Un mapa de imagen conserva una sola imagen y hace regiones clicables — hotspots en un plano, un diagrama o un menú gráfico sencillo. Emparejas un img con usemap con un <map> lleno de enlaces <area>.

Qué es un mapa de imagen

Un mapa de imagen no es un formato de imagen aparte. Es HTML que dice: «este rectángulo (o círculo, o polígono) en la imagen debe comportarse como un enlace». Los usuarios videntes hacen clic en la zona; la tecnología de asistencia necesita un alt claro en cada area porque puede no haber texto visible junto al hotspot.

Respuesta directa

1. Añade usemap="#mapname" en el img.
2. Añade <map name="mapname"> con uno o más elementos <area>.
3. Cada area necesita shape, coords, href y su propio alt.
   El # de usemap debe coincidir con el name del mapa (sin inventar una segunda ortografía).

Valores shape de un vistazo

Un mapa rectangular sencillo

Dos hotspots en un layout de escritorio bastan para aprender el cableado: usemap, name coincidente y rectángulos area con alt honesto.

Leer el ejemplo

• usemap="#deskmap" en la imagen apunta al mapa llamado deskmap
• Cada area es un enlace: href es el destino, alt nombra el hotspot
• coords para rect son izquierda, arriba, derecha, abajo en la cuadrícula de píxeles de la imagen
• El alt propio de la imagen («Desk layout») describe todo el gráfico; los alt de area nombran las zonas

Cómo funcionan las coordenadas

Las coordenadas se miden en píxeles CSS de la imagen tal como se dispone para el mapa. Si pones width y height en el img, mantén tus coords coherentes con ese tamaño de visualización mientras aprendes. Números incorrectos producen hotspots que fallan los objetos dibujados — un fallo silencioso habitual.

Hábitos de accesibilidad

Cada area clicable necesita un alt significativo. No dejes hotspots sin nombre. Prefiere mapas donde el propósito de cada región sea obvio. Si el diseño necesita comportamiento responsive complejo, muchos equipos pasan a SVG con enlaces o botones separados en lugar de mapas de píxeles frágiles.

Cuándo ayudan los mapas — y cuándo no

Los mapas ayudan con un solo diagrama de pocas regiones estables. Se vuelven incómodos cuando la imagen escala libremente en muchos breakpoints, porque las coords clásicas no se reescriben solas. Para UI responsive moderna, considera imágenes enlazadas por separado, layout CSS o SVG. Aun así, conocer mapas de imagen ayuda cuando heredas páginas antiguas o demos didácticas sencillas.

circle y poly (nota rápida)

circle usa centro y radio. poly enumera pares x,y alrededor de una forma libre. Empieza con rect hasta que el emparejamiento usemap / name se sienta natural; luego experimenta con otras formas en un gráfico de práctica.

Practica en tu editor

1. Usa una imagen ancha sencilla con dos regiones obvias.
2. Crea un map con dos áreas rect que enlacen a dos páginas de práctica pequeñas.
3. Haz coincidir usemap="#name" con map name="name" con cuidado (incluido el #).
4. Haz clic en cada región y confirma la navegación.
5. Rompe la coincidencia de nombre una vez, observa los hotspots muertos y corrígelo.
6. Mejora cualquier area cuyo alt solo diga «link».

Errores fáciles

• usemap / name que no coinciden (olvidar # en usemap o renombrar solo un lado)
• Falta de alt en cada area
• Coords que no coinciden con el tamaño real de la imagen o las posiciones de los objetos
• Confiar en mapas de imagen para layouts responsive muy fluidos sin un plan
• Poner la única descripción en el img y dejar las áreas sin etiquetar

Resumen

• Los mapas de imagen cablean img + usemap + map + area
• Las formas incluyen rect, circle y poly
• Cada area necesita href, alt, shape y coords
• Mantén los nombres coincidentes y las coords honestas
• Para UI responsive compleja, considera alternativas modernas — sigue aprendiendo mapas para legado y diagramas sencillos