Um mapa é uma imagem que permite realizar diferentes hiperlinks em função da "zona" da imagem que se clique.

As diretrizes para criar mapas são <MAP></MAP> e <AREA>.

A diretriz <MAP> identifica o mapa e tem o parâmetro name para indicar o nome do mapa.

A diretriz <AREA> define as áreas sensíveis da imagem. Tem os seguintes parâmetros obrigatórios:

shape = "tipo"

Indica o tipo de área a definir.

coords = "coordenadas"

Indica as coordenadas da figura indicada com shape.

href = "URL"

Indica o endereço o qual se acessa se se clica na zona delimitada pela área indicada.

Os tipos de área podem ser os seguintes:

rect

Área retangular. Deve-se especificar as coordenadas da esquina superior esquerda e as da esquina inferior direita.

poly

Polígono. Deve-se especificar as coordenadas de todos os vértices do polígono. O visor se encarrega de "fechar" a figura.

circle

Círculo. Deve-se especificar em primeiro lugar as coordenadas do centro do círculo e a seguir o valor do radio (em pontos).

Se duas áreas se sobrepõem, se executará a que se encontrar em primeiro lugar na definição do mapa. É importante definir uma última área que abarque a totalidade do gráfico para encaminhar a uma URL "padrão", com o objetivo de contemplar o caso de que não se clique sobre uma área definida.

Vejamos um exemplo completo.

<CENTER>
<TABLE Border=2>
<TD>
<B><MAP name =</B> "casa"<B>></B><br>
<B><AREA shape =</B> "poly" <B>coords =</B> "2,62,57,62,28,1"
<B>href=</B> "telhado.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "21,101,35,138"
<B>href=</B> "porta.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "2,64,57,138"
<B>href=</B> "casa.htm"<B>></B><br>
<B><AREA shape =</B> "circle" <B>coords =</B> "80,76,21"
<B>href=</B> "arvore.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "78,98,85,138"
<B>href=</B> "tronco.htm"<B>></B><br>
<B><AREA shape =</B> "rect" <B>coords =</B> "0,0,96,138"
<B>href=</B> "desenho.htm"<B>></B><br>
<B></MAP></B>
<TR>
</TABLE>
</CENTER>

Para ativar o mapa devemos indicar a imagem a mostrar, indicando que tal imagem é tratada por um mapa. Para isso, escreveríamos a seguinte diretriz:

<CENTER>
<TABLE Border=2>
<TD>
<B><IMG src =</B> "grafico.gif" <B>usemap =</B> "#casa"<B>></B>
<TR>
</TABLE>
</CENTER>

Se o seu visor tiver a capacidade de administrar mapas (Netscape 2.x ou Ms-Explorer 2.x ou superiores), prove clicando sobre alguma parte do mapa que definimos e o que lhe aparecerá a seguir:

<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "telhado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "porta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,18" href= "arvore.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "desenho.htm">
</MAP>
<CENTER>
<IMG src = "casa.gif" usemap = "#casa">
</CENTER>

Como podemos observar, o processo mais trabalhoso é o de determinar as coordenadas. Existem programas como MAPTHIS que permite realizar este processo de uma forma simples, simplesmente definindo as zonas com o mouse. O programa MAPTHIS permite abrir uma imagem tipo .GIF e marcar as zonas sensíveis. Este programa criará um arquivo com extensão .map que conterá em seu interior as coordenadas de cada área. Com esta informação, será muito mais fácil escrever nosso mapa. Pode-se buscar este programa em Shareware.com buscando por mpths.