Imagens Clicáveis

Existem basicamente dois métodos para a criação de mapas. Um deles, o Server-Side Imagemap, utiliza a comunicação com o servidor HTTP. Nesse método, o documento HTML busca informações em outros arquivos (geralmente de extensão .map ou .conf). Dentro desses arquivos estão as coordenadas e os links a elas relacionados.

No outro método (Client-Side Imagemap), essas coordenadas são declaradas dentro do arquivo HTML, e por isso são rastreadas pelo browser no momento em que o usuário escolhe um ponto na imagem. Dessa forma, o servidor já recebe uma requisição de um documento, pois as coordenadas do ponto escolhido e o arquivo correspondente já foram identificados pelo browser.

Essas coordenadas são encontradas, através de programas de manipulação de imagens como por exemplo o LView. Existem também programas que geram automáticamente essas coordenadas e atribuem a elas o endereço URL que você estipular. Um desses programas é o MapThis.

Ele permite que você selecione a área desejada através das ferramentas circulo, retângulo ou polígono e indique o endereço a qual aquela área esta relacionada. Depois ele cria automáticamente o documento-fonte no formato em que vôce preferir.

Como já mensionamos antes, neste último método, o mapa é declarado dentro do documento HTML. O conjunto de comando responsáveis pela criação deste mapa estão exemplificados abaixo:

<MAP NAME= "mapa ">
<area href= "ex1.html " shape= "rect " coords= "7, 3, 86, 65 ">
<area href= "ex2.html " shape= "circle " coords= "210, 33, 33 ">
<area href= "ex3.html " shape= "rect " coords= "369, 2, 435, 62 ">
</map>
<img border= "0 " src= "imagem.jpg " usemap= "#mapa ">

Neste exemplo, usamos a opção rect e circle no comando AREA SHAPE, mas existe ainda a opção
POLY: um polígono; cada coordenada declarada é um vértice;

No exemplo as coordenadas declaradas são, respectivamente, do vértice esquerdo superior e vértice direito inferior de um retângulo. O resultado seria o mapa clicável abaixo: