HTML Tutorial
Alinhamento
Formatação
Títulos
Linhas
Listas
Tabelas
Imagens
Formulários
Frames

Mapas clicáveis de imagem

  • Uso da tag <img>
Os atributos dessa tag já foram discutidos no capítulo sobre Imagens, com exceção de:  ismap e usemap.
O atributo ismap define um mapa remoto de imagens (server-side image map). 
<a href="URL">
<img src="imagem/toucan60.gif" ismap>
</a>
O atributo usemap define um mapa local de imagens (client-side image map). 
<img src="imagem/toucan60.gif" usemap="#mapa1">
  • Uso da tag <map>
Atributos: name.
O atributo name define o nome do mapa de imagem referenciado pelo valor do atributo usemap (após o #). 
<map name="mapa1">
</map>
  • Uso da tag <area>
Atributos: shape, coords, href, nohref e target.
O atributo shape define a forma da área sensível e pode ter os valores: "circle", "rect", "poly", que delimitam respectivamente círculos, retângulos e polígonos.  Se este atributo for omitido a forma retangular será assumida (shape="rect"). 
<area shape="circ">
O atributo coords define as coordenadas (em pixels) da forma mencionada pelo atributo anterior. 
<area coords=x1,y1,x2,y2>
O atributo href  define o endereço  (URL) da  página associada a uma determinada região (área) do mapa. 
<area coords=x1,y1,x2,y2 href="URL">
O atributo nohref  define uma região que não possui nenhuma ação associada. 
<area coords=x1,y1,x2,y2 nohref>
O atributo target define o frame (alvo) em que a página referenciada pelo link será carregada. 
<area coords=x1,y1,x2,y2 href="URL" target="_blank">

Exemplo:
<img src="imagem/toucan60.gif" alt="mapa clicável" usemap="#exemplo">
<map name="exemplo">
<area shape="rect" coords=0,0,144,48 href="HTML/imagens.htm"> 
<area shape="rect" coords=0,48,144,96 href="HTML/linhas.htm" target="_blank">
<area shape="rect" coords=0,96,144,144 nohref>
</map>
mapa clicável
Hosted by www.Geocities.ws

1