Menu

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:

Forum
voltar Índice Próximo