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...