Mapas de imagem HTML

O elemento Picture escolhe entre ficheiros de imagem. Um mapa de imagem (image map) mantém uma única imagem e torna regiões dela clicáveis — hotspots num plano de piso, num diagrama ou num menu gráfico simples. Você associa um img que tem usemap a um <map> cheio de ligações <area>.

O que é um mapa de imagem

Um mapa de imagem não é um formato de imagem separado. É HTML que diz: “este retângulo (ou círculo, ou polígono) na figura deve comportar-se como uma ligação.” Utilizadores com visão clicam na zona; a tecnologia assistiva precisa de um alt claro em cada area, porque pode não haver texto visível ao lado do hotspot.

Resposta direta

1. Adicione usemap="#mapname" no img.
2. Adicione <map name="mapname"> com um ou mais elementos <area>.
3. Cada area precisa de shape, coords, href e do seu próprio alt.
   O # em usemap deve corresponder ao name do mapa (sem inventar uma segunda ortografia).

Valores de shape num relance

Um mapa retangular simples

Dois hotspots num layout de secretária bastam para aprender a ligação: usemap, name correspondente e retângulos area com alt honesto.

Ler o exemplo

• usemap="#deskmap" na imagem aponta para o mapa chamado deskmap
• Cada area é uma ligação: href é o destino, alt nomeia o hotspot
• coords para rect são left, top, right, bottom na grelha de píxeis da imagem
• O alt da própria imagem («Desk layout») descreve o gráfico inteiro; os alt das area nomeiam as zonas

Como funcionam as coordenadas

As coordenadas medem-se em píxeis CSS da imagem conforme disposta para o mapa. Se definir width e height no img, mantenha as coords consistentes com esse tamanho de exibição enquanto aprende. Números errados produzem hotspots que falham os objetos desenhados — uma falha silenciosa comum.

Hábitos de acessibilidade

Cada area clicável precisa de um alt significativo. Não deixe hotspots sem nome. Prefira mapas em que o propósito de cada região seja óbvio. Se o design exigir comportamento responsivo complexo, muitas equipas passam a SVG com ligações ou a botões separados em vez de mapas de píxeis frágeis.

Quando os mapas ajudam — e quando não ajudam

Os mapas ajudam num único diagrama com poucas regiões estáveis. Tornam-se incómodos quando a imagem escala livremente por muitos breakpoints, porque as coords clássicas não se reescrevem automaticamente. Para UIs responsivas modernas, considere imagens ligadas separadas, layout CSS ou SVG. Ainda assim, conhecer mapas de imagem ajuda quando herda páginas antigas ou demos de ensino simples.

circle e poly (nota rápida)

circle usa centro e raio. poly lista pares de pontos x,y à volta de uma forma livre. Comece com rect até o emparelhamento usemap / name parecer natural; depois experimente outras formas num gráfico de prática.

Pratique no seu editor

1. Use uma imagem larga simples com duas regiões óbvias.
2. Crie um map com duas area rect a ligar a duas páginas pequenas de prática.
3. Faça corresponder usemap="#name" a map name="name" com cuidado (incluindo o #).
4. Clique em cada região e confirme a navegação.
5. Quebre uma vez a correspondência de nomes, observe os hotspots mortos e depois corrija.
6. Melhore qualquer area cujo alt diga apenas «link».

Erros fáceis

• usemap / name desalinhados (esquecer # em usemap ou renomear só um lado)
• alt em falta em cada area
• Coords que não correspondem ao tamanho real da imagem ou às posições dos objetos
• Depender de mapas de imagem para layouts responsivos muito fluidos sem um plano
• Colocar a única descrição no img e deixar as area sem rótulo

Resumo

• Os mapas de imagem ligam img + usemap + map + area
• As formas incluem rect, circle e poly
• Cada area precisa de href, alt, shape e coords
• Mantenha os nomes correspondentes e as coords honestas
• Para UIs responsivas complexas, considere alternativas modernas — ainda assim aprenda mapas para legado e diagramas simples