Mapear Imagem

Mapeamento de imagens

Recurso que torna possível definir várias regiões em uma mesma imagem para transformar cada uma delas num link diferente.

<MAP> e </map>

• Definição: indica o mapeamento e deve conter as definições e características de cada área, que serão definidas pela tag area.

• Atributo:

name = nome do mapeamento. É utilizado, depois, pelo atributo usemap da tag de imagem (img) para indicar o mapeamento usado.

<AREA>

• Definição: deterina as características de cada área mapeada.

• Atributos:

shape = indica o formato da área

Valores: rect | circle | poly

coords = define as coordenadas (par de números que permite a localização exata de um ponto numa imagem). As coordenadas são relativas ao canto superior esquerdo da imagem (ponto zero) e podem ser expressas em pixels ou porcentagem.

Os números devem obedecer a uma sequência e são separados por vírgulas.

O valor rect requer dois pontos (definidos por quatro números):

area shape="rect" coords="10,15,67,72"

O valor circle requer um ponto, e o tamanho do raio:

shape="circle" coords="118,40,30"

O valor poly requer, pelo menos, três pontos para a definição de cada vértice do polígono:

shape="poly" coords="82,48,127,97,62,97"

href = define o link, ou seja, o caminho do arquivo para onde aponta cada área

target = define onde será aberto o documento (janela, frame)

alt = texto alternativo (não funciona em todos os navegadores).

• Aplicação:

________________________________________

<map name="mapa_figuras">

<area shape="rect" coords="9,15,68,73" href="verde.htm" target="_blank">

<area shape="circle" coords="119,40,30" href="azul.htm" target="_blank">

<area shape="poly" coords="83,49,127,98,64,98" href="vermelho.htm" target="_blank">

</map>

<img src="figuras_geometricas.gif" usemap="#mapa_figuras" border="0">