1. Mapeamento de Imagens - Hélder Oliveira
Concepção de Websites
Mapeamento de Imagens

2. Mapeamento de Imagens - Hélder Oliveira
O que é o Mapeamento de Imagens?
• Uma imagem, várias
ligações…
• Especificação de zonas
na imagem para cada
ligação

3. Mapeamento de Imagens - Hélder Oliveira
Tipos de Zonas
Circunferência
Rectângulo
Polígono

4. Mapeamento de Imagens - Hélder Oliveira
Criação do Mapa em HTML
1. Criar o código que
especifica o mapa da
imagem (tag map)
2. Inserir o código da
imagem (tag img)
3. No código da imagem,
adicionar uma
referência para o mapa
a aplicar
<map name="praiamap">
<area href="/" shape="poly"
coords="17,51,42,35,66,51,66,89,17,89"
alt="Casa da praia">
</map>
<img src="imagemap.png“
usemap="#praiamap">

5. Mapeamento de Imagens - Hélder Oliveira
Definição de um mapa
• Tag “Map”
• Deve ser atribuído um
nome que identifique o
mapa
• Cada mapa deve conter
pelo menos uma zona
definida
• Exemplo:
<map name="praiamap">
<area href="/" shape="poly"
coords="17,51,42,35,66,51,66,89,
17,89"
alt="Casa da praia">
<area href="/" shape="rect"
coords="129,27,171,52"
alt=“Bandeira">
</map>

6. Mapeamento de Imagens - Hélder Oliveira
Tipos de Zonas
Circunferência
Rectângulo Polígono
shape=“rect”
coords=“x1,y1,x2,y2”
shape=“circle”
coords=“x,y,r”
shape=“poly”
coords=“x1,y1,x2,y2,x3,y3,x4,y4,x5,y5”
(x2,y2)
(x1,y1)
(x,y)
r
(x1,y1)
(x2,y2)
(x3,y3)
(x4,y4)
(x5,y5)

7. Mapeamento de Imagens - Hélder Oliveira
Atributo “nohref”
• Permite definir uma zona
sem ligação
• Exemplo:
<area shape="circle"
coords=“0,0,50” />
<area shape=“rect" nohref
coords=“0,50,50,0” />

8. Mapeamento de Imagens - Hélder Oliveira
Ferramentas para criação de mapas
• Aplicações incluídas em editores HTML conhecidos
(Dreamweaver, Front Page,etc.);
• http://www.maschek.hu/imagemap/imgmap

9. Mapeamento de Imagens - Hélder Oliveira
FIM