Imagens Mapeadas(X)HTML

Professor Jolvani

Aula 19

Imagens Mapeadas - (X)HTMLNesta aula iremos aprender a trabalhar com

imagens mapeadasVamos criar a nossa aula.... Aula14.htmlComo 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

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.

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

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.

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

Próxima Aula: Div e Spans