Mapas Clicáveis em uma página são figuras que permitem a associação de áreas desta figura com links para diferentes URLs. Estes mapas podem ser definidos de diferentes maneiras;  neste treinamento estaremos apresentando um método bastante simples usando imagemap. 

Código HTML

<MAP NAME=menu>

<AREA SHAPE=rect COORDS= "151,7,221,20" HREF=menu1.html>
<AREA SHAPE=rect COORDS= "232,6,303,19" HREF=menu2.html>
<AREA SHAPE=rect COORDS= "313,8,386,20" HREF=menu3.html>
<AREA SHAPE=rect COORDS= "396,7,469,20" HREF=menu4.html> 
<AREA SHAPE=rect COORDS= "481,7,552,21" HREF=menu5.html>
<AREA SHAPE=rect COORDS= "557,14,595,27" HREF=mailto:xxxx@xxxx.xx.xx>
<AREA SHAPE=rect COORDS= "526,57,593,67" HREF=http://www.unicamp.br>
</MAP><IMG Border=0 SRC="nome da imagem. gif ou jpg" USEMAP="#menu" >

No exemplo acima a diretiva MAP está definindo a criação do mapa e informando seu nome. A diretiva ÁREA informa o formato,SHAPE, da área "sensível" , suas coordenadas, COORD, e o endereço da URL associada. 

O formato da área (SHAPE) pode ser: 

RECT - retângulo - coordenadas x1,y1 , x2,y2 
CIRC - círculo - corrdenadas x,y e raio r 
POLY - polígono - coordanadas x1,y1 , x2,y2 , x3,y3 , ... 

A Diretiva <IMG ... USEMAP= ...> associa a defição do Mapa à Imagem. 

As Coordenadas podem ser obtidas utilizando softwares de tratamento de imagens, como o  Paint Shop Pro.