Mapas de Imagem

Mapas de Imagem são imagens com áreas clicáveis, onde você pode definir ações para quando forem clicadas. Experimente clicar no computador, café ou celular da imagem abaixo:

O atributo usemap da tag img

• Para criar o Mapa de Imagem em uma imagem, é preciso adicionar o atributo usemap na tag img.
• O atributo usemap serve para nomear o Mapa de Imagem que será criado, e a sua sintaxe é: usemap = #nome_do_mapa.

A tag map

• A tag map é utilizada para criar o Mapa de Imagem.
• Ela possui o atributo name, que deve ser preenchido com o nome que você forneceu na tag img, porém sem a hashtag.
• A tag map possui a tag area.

A tag area

• Na tag area você define a região do Mapa de Imagem que você quer tornar clicávele as ações que serão realizadas quando o usuário clicar.
• Os dois atributos principais da tag area são shape e coord.
• As ações realizadas podem ser desde um link de redirecionamento utilizando o atributo href até uma função em JavaScript utilizando o atributo onclick.

O atributo shape

• O atributo shape tem a função de definir o formato da área clicável na imagem.
• Existem quatro valores válidos para o atributo shape: rect, circle, poly e default.
• Cada um desses valores possui um número necessário de coordenadas que deve ser informado no atributo "coord".

O valor rect

• Determina uma área clicável de formato triangular.
• São necessários quatro valores de coordenadas no atributo coord para formar um retângulo: dois pares para informar a localização xy de uma diagonal e mais dois pares para informar a localização xy da diagonal oposta.

O valor circle

• Determina uma área clicável de formato circular.
• São necessários três valores de coordenadas no atributo coord para formar um círculo: dois pares para informar a localização xy do centro do círculo, e outro para informar o raio do círculo.

O valor poly

• Determina uma área clicável poligonal (um conjunto de linhas retas que pode possuir qualquer formato).
• Como o formato do polígono pode ser variável, é possível criar a área clicável com quantos valores no atributo "coord" você desejar.
• O número de coordenadas deve vir em pares. O polígono é formado por um conjunto de pares de coordenadas que informam a localização xy do primeiro e/ou do próximo ponto da linha reta.
• Cada ponto de localização xy se une em uma linha reta com o próximo ponto. O último ponto informado se une em uma linha reta com o primeiro ponto, fechando o polígono.
• São necessários no mínimo três pontos para formar um polígono. Portanto, três pares de coordenadas informando a localização xy de três pontos.

O valor default

• O valor default preenche toda a imagem como uma área clicável.
• Portanto, ele não possui a necessidade do atributo coord.

O atributo coord

• O atributo coord tem a função de receber as coordenadas da área clicável no Mapa de Imagens.
• As coordenadas devem ser informadas como números e separadas por vírgula.
• O número informado no atributo coord é interpretado como uma unidade em pixel na imagem.
• Cada valor informado em shape modifica a forma como o atributo coord interpreta as coordenadas em pixels, como explicado acima.
• Os pontos no atributo coord devem ser informados através de um par de coordenadas que informam a localização xy do ponto: x, y.
• A coordenada x do ponto é calculada partindo da margem esquerda da imagem.
• A coordenada y do ponto é calculada partindo do topo da imagem.
• Por exemplo: um par de coordenadas "35, 50" informa que a coordenada x do ponto se encontra a 35 pixels de distância da margem esquerda da imagem, e que a coordenada y se encontra a 50 pixels de distância do topo da imagem.

<- Voltar