Este documento fornece instruções sobre como criar imagens mapeadas em HTML. Ele explica como vincular partes específicas de uma imagem a outras páginas usando tags <map> e <area> e fornecendo coordenadas. Ele também discute como descobrir as coordenadas corretas usando um editor de imagem e cria links retangulares, circulares e poligonais em uma imagem de exemplo.

1. Imagens Mapeadas
(X)HTML
Professor Jolvani
Aula 19

2. Imagens Mapeadas - (X)HTML
 Nesta aula iremos aprender a trabalhar com
imagens mapeadas
Vamos criar a nossa aula.... Aula14.html
Como vamos criar imagens mapeadas precisamos
linkar a outras páginas. Então criamos três outras
paginas... Barco.html chinelo.html e coco.html,
representando as imagens da página Aula14.html

3. Imagens Mapeadas - (X)HTML
 Iremos criar um link nos objetos chinelo, coco e barco... Com
dimensões circular para coco, retangular para chinelo e triangular
barco.
 Necessitamos criar 3 links na imagem
 Se fosse na imagem...
 Mas para criar + links em uma imagem precisamos usar a tag <map>
onde definimos os links em determinadas áreas da imagem....
 Para selecionar o local onde vai ser criado o link usamos as tags <área>
com atributos de retângulo, circulo e poligonal... + as coordenadas na
imagem + link para onde direcionar a página + alt.

4. Imagens Mapeadas - (X)HTML
 Como eu descubro as coordenadas da forma
retangular (rect) onde está o chinelo...
 Use um editor de texto ex: Paint...
 Devo informar a coordenada do canto superior
esquerdo e do canto inferior direito...

5. Imagens Mapeadas - (X)HTML
 Agora um link circular para o coco
 Para um shape circular (circle) precisamos informar a
coordenada do ponto central do pixel e quanto de
raio...
 No paint selecione o ponto central e diminua da
extremidade do coco para obter o raio do mesmo.

6. Imagens Mapeadas - (X)HTML
 Forma poligonal (poly)... Possibilitando criar uma
forma de qualquer maneira, contendo vários pontos.
 Precisamos informar três coordenadas.
 Abaixo o código... Verifique as coordenadas...

7. Próxima Aula: Div e Spans