Informática 2026: Seg-Qua-Sex – 13h30 às 16h50 / Terça e Quinta: 8h30 às 11h30 ou 13h30 às 16h50 / Web Designer: Seg-Qua-Sex – 8h30 às 11h30
Os mapas de imagem permitem transformar uma imagem em um conjunto de áreas clicáveis, geralmente funcionando como links para diferentes páginas ou recursos.
A imagem é definida pela tag <img>.
O mapa é definido pela tag <map>.
Dentro do mapa, cada área clicável é representada pela tag <area>.
Como os elementos <img> e <map> não têm relação hierárquica direta no HTML, foi criada uma forma de associá-los:
O mapa recebe um atributo name.
A imagem usa o atributo usemap, apontando para o mapa pelo nome.
<img src="clube.png" alt="Área do CCInter" usemap="#ccinter">
<map name="ccinter">
<area shape="rect" coords="50,50,150,150" href="pagina1.html" alt="Link 1">
<area shape="circle" coords="200,200,50" href="pagina2.html" alt="Link 2">
</map>
O elemento <area> define cada região interativa da imagem.
shape – define a forma geométrica da área.
default → seleciona a imagem inteira (dispensa coords).
rect → retângulo.
circle → círculo.
poly → polígono.
coords – define as coordenadas da área. Os valores variam conforme o shape:
Retângulo (rect): quatro valores → esquerda (x1), topo (y1), direita (x2), base (y2).
<area shape="rect" coords="50,50,150,150" href="retangulo.html" alt="Retângulo">
Círculo (circle): três valores → x e y do centro, seguido do raio.
<area shape="circle" coords="200,200,50" href="circulo.html" alt="Círculo">
Polígono (poly): lista de pares (x,y) representando cada vértice.
<area shape="poly" coords="100,50, 150,150, 50,150" href="poligono.html" alt="Polígono">
href – transforma a área em link, funcionando como no elemento <a>.
alt – descrição da área (essencial para acessibilidade).
<img src="mapa.png" alt="Mapa interativo" usemap="#mapaExemplo">
<map name="mapaExemplo">
<!-- Retângulo -->
<area shape="rect" coords="10,10,100,100" href="retangulo.html" alt="Área Retangular">
<!-- Círculo -->
<area shape="circle" coords="200,200,50" href="circulo.html" alt="Área Circular">
<!-- Polígono -->
<area shape="poly" coords="300,50, 400,150, 250,200" href="poligono.html" alt="Área Poligonal">
</map>