Curso HTML: 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 automaticamente essas coordenadas e atribuem a elas o endereço URL que você estipular. Um desses programas é o MapThis.

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

Como já mencionamos 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:

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 rectângulo. O resultado seria o mapa clicável abaixo onde cada imagem vai a uma página diferente: