Apresentacao aula3

194 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
194
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentacao aula3

  1. 1. Mapeamento de Imagens - Hélder OliveiraConcepção de WebsitesMapeamento de Imagens
  2. 2. Mapeamento de Imagens - Hélder OliveiraO que é o Mapeamento de Imagens?• Uma imagem, váriasligações…• Especificação de zonasna imagem para cadaligação
  3. 3. Mapeamento de Imagens - Hélder OliveiraTipos de ZonasCircunferênciaRectânguloPolígono
  4. 4. Mapeamento de Imagens - Hélder OliveiraCriação do Mapa em HTML1. Criar o código queespecifica o mapa daimagem (tag map)2. Inserir o código daimagem (tag img)3. No código da imagem,adicionar umareferência para o mapaa 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. 5. Mapeamento de Imagens - Hélder OliveiraDefinição de um mapa• Tag “Map”• Deve ser atribuído umnome que identifique omapa• Cada mapa deve conterpelo menos uma zonadefinida• 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. 6. Mapeamento de Imagens - Hélder OliveiraTipos de ZonasCircunferênciaRectângulo Polígonoshape=“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. 7. Mapeamento de Imagens - Hélder OliveiraAtributo “nohref”• Permite definir uma zonasem ligação• Exemplo:<area shape="circle"coords=“0,0,50” /><area shape=“rect" nohrefcoords=“0,50,50,0” />
  8. 8. Mapeamento de Imagens - Hélder OliveiraFerramentas para criação de mapas• Aplicações incluídas em editores HTML conhecidos(Dreamweaver, Front Page,etc.);• http://www.maschek.hu/imagemap/imgmap
  9. 9. Mapeamento de Imagens - Hélder OliveiraFIM

×