Mapas de imagens

Um mapa de imagem é uma imagem com áreas clicáveis que geralmente agem como links. A imagem é definida pela tag <img>. O mapa é definido pela tag <map>. Dentro dele, são colocadas tags <area> para denotar cada área clicável.

Como os elementos da imagem e do mapa não tem relação hierárquica entre si pela marcação do HTML, foi preciso pensar em uma forma de ligar um ao outro. A solução foi definir o atributo name no mapa e referenciar o mapa pelo nome dele na imagem, usando o atributo usemap:

<img src="sua-imagem.png" alt="" usemap="#seu-mapa-de-imagens">
<map name="seu-mapa-de-imagens">
  <area shape="poly" coords="20,20,20,40,40,40,60,20">
  <area shape="circ" coords="250,100,70">
  <area shape="rect" coords="50,20,100,150">
</map>

O atributo shape define a forma geométrica da área. Pode ser definido para default para selecionar a imagem inteira (o que faz com que o atributo coords seja desnecessário), circle/circ para círculos, rectangle/rect para retângulos, e polygon/poly para uma polígono.

O atributo coords define as coordenadas da área. Os valores sempre são separados por vírgulas. No caso de um polígono, o atributo coords deve ser uma lista de pares x, y. Já no caso de um retângulo, ele deve ter os valores das coordenadas left (esquerda), top (superior), right (direita) e bottom (inferior), nessa ordem. Se for um círculo, ele deve ter as coordenadas x e y do centro do círculo, e o raio, nessa ordem. Se você tiver dúvidas, veja novamente o exemplo anterior, no qual as três formas geométricas foram definidas.

Para fazer com que as áreas se comportem como links, você pode usar o atributo href nelas, além de outros atributos que podem ser usados em uma tag <a>, com exceção do atributo ping.