MAP E AREA

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.

Exemplo básico:

<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>

Elemento <area> (filho de <map>)

O elemento <area> define cada região interativa da imagem.

Principais atributos:

• 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).

Exemplo Completo de Mapa de Imagem

<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>