HTML o Site - Hospedeiros

o Site | Básico | Avançado

Home

Estrutura Básica

Cabeçalho

Formatação de Texto

Formatação Parágrafos

Imagens com Mapas Clicáveis

           É provavel que você já tenha visto alguma imagem pela Internet cuja função era servir de link para outras páginas, porém de uma forma diferente, ao invés de termos uma imagem que quando clicada em qualquer ponto desta o browser se dirigi para um link específico, temos uma imagem dividida em diversas "regiões" onde cada uma delas, quando clicada, se dirigi a um link diferente.
           Esse tipo de imagem é chamada de imagem com mapa clicável, imagem clicável ou imagem sensivel.
           Você também pode usar um programa para criação de mapas clicáveis, que construirá o código do mapa para você, isto pode ser útil para aqueles que não sabem perfeitamente como criá-lo, um exemplo deste tipo de programa é o Mapedit.
           A referência para que a imagem siga um mapa determinado dentro do dodumento HTML é feita através do atributo usemap="nome do mapa" adicionado ao img.
Exemplo de uma imagem que deverá possuir um mapa clicável, sendo adicionada:
<img src="imagem.gif" usemap="#nome">
Nota: o nome do mapa deve ser precedido pelo caracter #.

Construindo os Mapas

           Os mapas utilizam as tags <map>...</map> para a construção de sua estrutura, com o atributo name no elemento map para indicar o nome do mapa.
Exemplo da extrutura básica de um mapa:
<map name="nome">
<area shape="circle/rect/poly" coords="x,y" href="URL">
</map>            Para definir as regiões da imagem que serão linkadas deve-se usar a tag <AREA>, esta por sua vez deve ser procedida por alguns atributos especificos que seguem abaixo:
Atributo shape="circle/rect/poly"
           Este atributo determina o tipo da area que será linkada (circle=circulo, rect=retângunlo e poly=polígono).
Atributo coords="x,y"
Indica as coordenadas em pixels das areas sensiveis de acordo com o tipo de forma especificada pelo atributo shape:

Circle (x,y,r)
Se a forma for do tipo circulo, então devem ser indicados nas coordenadas três dados: x,y as coordenadas da localização do centro do circulo e r o tamanho do raio.

Rect (x1,y2,x3,y4)
Se a forma for do tipo retângulo, se indica nas coordenadas 4 dados, sendo x1,y2 a localização do vertice superior esquerdo do retângulo e x3,y4 as coordenadas do vertice inferior direito do mesmo.

Poly (xa,ya,xb,yb...)
Se a forma for do tipo poligono deve indicar-se a localização de cada vertice do poligono através de pares de coordenadas

Atributo href="http://www.dominio.com"
           Esse atributo é usado para indicar o endereço do link que a area clicavel da imagem deve fazer referencia.
           Não se esqueça que cada mapa pode conter mais de uma tag <area>. Veja abaixo o exemplo completo de um mapa clicável:
<img src="imagem.jpg" usemap="#mapa">
<map name="mapa">
   <area shape="rect" coords="0,0,80,60" href="pag1.html">
   <area shape="rect" coords="80,60,160,60" href="pag2.html">
   <area shape="circle" coords="120,100,30" href="pag3.html">
   <area shape="poli" coords="10,80,0,90,15,100,30,100,20,80,10,80" href="pag4.html">
</map>

Pegue aqui o seu MapEdit, para facilitar seu trabalho

Topo