Imagens Mapeadas 
(X)HTML 
Professor Jolvani 
Aula 19
Imagens Mapeadas - (X)HTML 
 Nesta aula iremos aprender a trabalhar com 
imagens mapeadas 
Vamos criar a nossa aula.... ...
Imagens Mapeadas - (X)HTML 
 Iremos criar um link nos objetos chinelo, coco e barco... Com 
dimensões circular para coco,...
Imagens Mapeadas - (X)HTML 
 Como eu descubro as coordenadas da forma 
retangular (rect) onde está o chinelo... 
 Use um...
Imagens Mapeadas - (X)HTML 
 Agora um link circular para o coco 
 Para um shape circular (circle) precisamos informar a ...
Imagens Mapeadas - (X)HTML 
 Forma poligonal (poly)... Possibilitando criar uma 
forma de qualquer maneira, contendo vári...
Próxima Aula: Div e Spans
Próximos SlideShares
Carregando em…5
×

Aula 19 imagens mapeadas

208 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
208
No SlideShare
0
A partir de incorporações
0
Número de incorporações
8
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 19 imagens mapeadas

  1. 1. Imagens Mapeadas (X)HTML Professor Jolvani Aula 19
  2. 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. 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. 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. 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. 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. 7. Próxima Aula: Div e Spans

×