Mapas

Mapas clicáveis executados pelo servidor (´server-side imagemaps´)

Um primeiro método para criação de mapas é usando a comunicação com o servidor HTTP.

Os servidores WWW têm um programa que lida com a relação entre coordenadas de imagens e URLs. No servidor NCSA, esse programa é o imagemap, no CERN é o htimage. No servidor Apache, o módulo imagemap já vem embutido mas sua ativação deve ser configurada.

Escolhida a imagem que servirá de base de partida de diversos links para outros documentos, é preciso gerar um arquivo relacionando coordenadas da imagem a determinados links. Essas coordenadas são encontradas por meio de programas de manipulação de imagens ou pelo próprio editor de HTML.

Um arquivo .map (do servidor NCSA), tem o conteúdo organizado da seguinte forma:

Um arquivo .conf (do servidor CERN), tem o conteúdo organizado da seguinte forma:

Ambos arquivos significam a mesma coisa:

1. a região da figura, compreendida pelo retângulo (rect) de coordenadas (15,8) e (135,39), funciona como um link para o URL http://www.usp.br/;

2. a região da figura, compreendida pelo círculo (circle ou circ) de centro (306,204) e raio 7 é um link para o URL http://www.intermidia.icmc.usp.br/;

3. se o mouse não for acionado em nenhuma dessas duas regiões previstas, o link será dirigido para o arquivo default - neste exemplo, o nada.html

O formato desses arquivos para figuras clicáveis pode variar, mas basicamente contém esses mesmos elementos:

• default - indica um endereço padrão para quando o mouse for acionado em uma área da figura além das previstas pelo autor;
• circle ou circ - declara um círculo na figura; os pontos indicam o centro e um ponto de fronteira do círculo;
• poly - um polígono; cada coordenada declarada é um vértice;
• rect - um retângulo; as coordenadas declaradas são, respectivamente, do vértice esquerdo superior e vértice direito inferior.

Tão logo seu arquivo fazclic.map esteja pronto, seu mapa sensível deve ser declarado da seguinte maneira:

<A HREF="http://www.host.br/fazclic.map"><IMG SRC="mapa.gif" ISMAP></A>

onde

• http://www.host.br/fazclic.map - é o endereço para o arquivo .map que contém as diretivas que associam regiões da figura a referências WWW
• mapa.gif - é a figura que irá "funcionar" como mapa clicável

O servidor HTTP deve estar configurado para reconhecer os arquivos .map como diretivas de execução de mapas clicáveis, para fazer a correspondência entre as coordenadas de um pixel e o caminho de um arquivo.

Se essa configuração não estiver ativa, ou faltarem arquivos que permitem esse recurso, o resultado de se acionar o mouse sobre um mapa clicável será apenas o de se obter o código fonte do arquivo .map; o URL desse resultado será o endereço do arquivo .map, seguido pela coordenada do pixel sobre o qual o mouse foi acionado.

Exemplo de um arquivo mapa.map, para a figura abaixo:

#Página da Graduacao
rect exemplos/grad.html 0,0 130,45
#Pagina do Mestrado
rect exemplos/mestr.html 133,0 230,45
#Pagina do Doutorado
rect exemplos/dout.html 234,0 364,45

Esta formatação declara a imagem acima como mapa clicável:
<A HREF="mapa.map"><IMG SRC="icones/cursos.gif" ISMAP BORDER=0></A>

Como nosso servidor não está configurado para executar mapas, somente abaixo temos um exemplo ativo, executado pelo cliente (o browser).

Mapas clicáveis executados pelo cliente (´client-side imagemaps´)

Com o client-side imagemap, os mapas sensíveis são rastreados 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.

Na verdade, a relação coordenadas-documentos continua existindo, mas agora em vez de estar em um arquivo .map separado, está dentro do próprio documento. Preste atenção ao conjunto de atributos necessários para que o mapa funcione:

<MAP NAME="nomemapa">

<AREA SHAPE="forma1" HREF="arq1.html" COORDS="x1,y1,x2,y2">

<AREA SHAPE="forma2" HREF="arq2.html" COORDS="x3,y3,x4,y4">

</MAP>

<IMG SRC="imagem.gif" USEMAP="#nomemapa">

Neste exemplo, transformamos a barra abaixo em mapa sensível:

<map name="mapname">

<area shape="rect" href="exemplos/grad.html" COORDS="0,0,130,45">

<area shape="rect" href="exemplos/mestr.html" COORDS="133,0,230,45">

<area chape="rect" href="exemplos/dout.html" COORDS="234,0,364,45">

</map>

<img src="icones/cursos.gif" USEMAP="#mapname" border=0>