Image Maps

[inforsis 1]

O que é uma image Map?

 

Um Image Map refere-se a uma imagem que é sensível ao toque do mouse, isto é, a imagem pode possuir áreas sensíveis que podem ser associadas a links, essas áreas têm um comportamento semelhante aos links normais de uma página HTML (quando pressionadas com o mouse, é chamado o link associado a essa área).

 

Um Image Map tem três componentes essenciais:

a imagem um arquivo normalmente no formato GIF ou JPEG,

um conjunto de coordenadas que identificam as áreas sensíveis,

e a identificação na página HTML que a imagem é um Image Map.

 

Implementação

usarei aqui o atributo rect

 

<map name="Map" id="Map"><area shape="rect" coords="a1,b1,a2,b2" href="#" />

 

name = NOME PARA IDENTIFICAR

ID = idem name.

area shape = tipo de atributo, no exemplo usei rect um rectangulo.

coords = coordenadas para definir a area sensivel.

a1 = coordenadas iniciais em largura

a2 = coordenadas finais em largura.

b1 = coordenadas iniciais em altura.

b2 = coordenadas finais em altura.

 

HTML

[url="http-~~-//december.com/html/4/element/img.html"]<img[/url] src="http-~~-//www.jadsonmoreira.com/arquivos/imagemap.jpg" width="300" height="207" border="0" usemap="#Map" />
  [url="http-~~-//december.com/html/4/element/map.html"]<map[/url] name="Map" id="Map">
  <area shape="rect" coords="34,34,134,104" href="#" />
  <area shape="rect" coords="198,137,249,171" href="#" />
  </map>

 

Existem outro tipo geométrico de regiões que podem ser usados, nomeadamente as opções circle e polygon.

 

--------------------------------------------

Fim, espero que tenha dado uma noção legal do que é imageMap e como é usada.

 

FONTE

 

Google.com.br

 

OUTROS LINKS:

Mapa de imagem com pop-up

[webflex 0]

Olá,

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Bom trabalho ;).

 

Só uma pergunta, caso seja um poligono, terá quantas coordenadas? e se for um circulo?

 

Cumps \o/

[RTaveira 0]

È mesmo, dá uns exemplos para facilitar nossa vida, e colocar os códigos entre a tag

 na próxima, beleza ?

 

Abraço !