Figuras que trabalham e enfeitam

Você já deve ter reparado que algumas home pages possuem imagens que não são simples figuras decorativas. Existe um tipo de imagem que é sensível ao clique do mouse e funciona como uma plataforma de lançamento para diversos links de hipertexto.

Uma excelente utilização para esse tipo de imagem é, por exemplo, na criação de barras de navegação, muito comuns na Web. Repare na imagem ao lado. Não seria interessante se pudéssemos criar regiões clicáveis independentes, onde cada uma delas nos levasse a documentos distintos? Mas como será que isso é feito?

Com certeza você deve estar pensando que isso é uma tarefa para experts, mas está muito enganado! Chegou a hora de adicionar este recurso a sua home page, mas como não quero que você saia por aí sem saber o que está fazendo, que tal primeiro entender um pouco melhor como tudo isso funciona?

Métodos que tornam sua imagem sensível

Existem dois métodos para tornar uma imagem sensível em determinada região, ou de outra forma, métodos para a construção de "mapas de imagens": os Mapas Local de imagens (Client-Side Maps) e o Mapa Remote de Imagens (Server-Side Image Maps). A escolha entre um ou outro pode ser feita após analisarmos suas características principais.

A diferença básica entre os dois métodos é extremamente importante. O mapa remoto é uma combinação de CGI (Common Gateway Interface), um "arquivo de mapa" e HTML. Um arquivo que reside no servidor de Web e que informa as regiões sensíveis da imagem.

Este método funciona da seguinte maneira: quando você clica sobre uma região sensível de uma imagem, o navegador fornece ao servidor de Web as coordenadas (x,y) de onde você clicou. O servidor procura no arquivo de mapa daquela imagem qual a URL (Uniform Resource Locator) que corresponde à região clicada, e envia essa URL de volta para o navegador, que se encarrega de solicitá-la e mostrá-la em sua tela.

Por outro lado, quando você utiliza um mapa local de imagem (Client-Side Image Maps), todas as informações que definem o mapa das regiões sensíveis da imagem estão dentro do próprio código HTML da página que está sendo mostrada na sua tela, e com isso não há necessidade de recorrer ao servidor para identificar as coordenadas de um clique. Economizamos um acesso ao servidor, e isso é bastante interessante pois reduzimos o tempo de carga de nossas páginas. Não é tudo o que a gente quer? Então, esse será o método escolhido - Mapa Local de Imagens.

Nota: um mapa local de imagem produz uma melhor utilização da rede, pois gera um tráfego menor e diminui a carga de pedidos para o servidor de Web, aumentando assim a performance do navegador, já que o tempo de resposta fica reduzido ao pedido de um endereço. Porém, fique ciente que um mapa remoto produz mais dinamicidade à um site do que um mapa local, pois com o mapa remoto trocando apenas o arquivo do "mapa da imagem" você trocará todos os mapas de todas as páginas que contenham o mapa.

Elementos HTML para mapas de imagem

Como existem dois tipos de mapas de imagem, existem diferentes elementos HTML para cada tipo. Na verdade, ambos têm uma coisa em comum: adiciona parâmetros ao elemento de imagem <IMG SRC=...>.

Elemento para mapa remoto de imagens

O mapa remoto fica no servidor em um arquivo separado. Para fazê-lo funcionar, além de construir o arquivo, precisamos referenciá-lo em nossa página. Isto é feito da seguinte forma:

<A HREF="arquivo_de_mapa.map"><IMG SRC="nome_da_imagem" ISMAP></A>

Porém, como já falei na introdução, motivos não faltam para você abandonar este modelo e utilizar um mapa local.

Apesar de apresentar o código HTML de mapa remoto de imagem, esta técnica caiu em desuso. Achei interessante apresentar para que você possa ter uma idéia da evolução dos mapas de imagem.

Elemento para mapa local de imagem

Como nem tudo são flores, os elementos para mapas locais são mais complexos. Além de associar um mapa à imagem, você precisa mapear toda a figura com o elemento <MAP>:

<IMG SRC="nome_da_imagem" USEMAP="nome_do_mapa">
<MAP NAME="nome_do_mapa">
<AREA SHAPE="formato" COORDS="AA,BB,CC,...,YY,ZZ" HREF="endereco">
<AREA SHAPE="formato" COORDS="AA,BB,CC,...,YY,ZZ" HREF="endereco">
...
</MAP>

Ou seja, você precisa escrever o formato e a dimensão da região mapeada, e o endereço associado a ela.

Para facilitar este trabalho, existem programas que permitem a você fazer este mapeamento graficamente, e se encarregam de gerar este código complicado. Para esta árdua tarefa, adotei o excelente GeoHTML (http://www.fegi.ru/geohtml), lembrando que este software é livre para fins não-comerciais, então, se você vai ganhar algum dinheiro com ele, use-o e depois retribua o autor com alguma quantia que achar necessária, por favor, tenha um pouco de ética se for usar o software para fins comerciais.

Criando um mapa local de imagem

Essa tarefa será dividida em duas partes: a criação do documento HTML e do mapa de imagem. Se você leu as primeiras colunas, já deve estar bastante familiarizado com o HTML.

Utilizando qualquer editor de sua preferência, adicione a imagem que deseja sensibilizar ao código HTML de sua página com o elemento <IMG SRC=...>.

Exemplo mapa.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Mapa Local de Imagem</TITLE></HEAD>
<BODY>
Exemplo de mapa local de imagem:
<P>
<IMG SRC="mapa.gif" BORDER="0">
</BODY>
</HTML>

Por enquanto nada de muito novo, não é? Então vamos passar para a parte "mais nobre" - a construção do mapa de imagens.

Para essa tarefa, usarei o GeoHTML, um poderoso editor de mapas de imagens.

Uma vez instalado, ative o programa e você terá acesso à tela principal. Clique no botão New Map, ou acione o menu File e clique em Nem Map.... Clique no botão procurar () do item Source, selecione o arquivo de imagem que você criou e clique em Ok, para começar à mapear.

Ao selecionar o arquivo, a janela Object List irá criar um novo mapa para a imagem, chegamos ao momento mais importante - associar áreas da imagem aos endereços.

Você pode optar por várias ferramentas na hora de marcar a região a ser sensibilizada: retângulos, círculos ou polígonos. O ideal é que escolha a que melhor se adapte ao formato da área a ser mapeada.

Estando com a ferramenta selecionada, vamos começar a definir as regiões. Marque a área do primeiro botão mantendo o mouse clicado, solte-o, então a janela Area Inspector irá mostrar as propriedades da área marcada.

Você terá os seguintes campos que podem ou não serem preenchidos:

. Alt: escreva o texto que você deseja que apareça quando o mouse estiver posicionado;
. Class: define a classe à ser utilizada pelas folhas de estilo nesta área;
. Coords: define as coordenadas da área, contém os valores inteiros das coordenadas que foram escritas através do traçado do mouse através de um ponto, e depende do tipo geométrico (a propriedade da forma) da área. Estas coordenadas são medidas em pixels;
. Href: informe aqui o endereço da página associada a esta área;
. Id: identificador da área, é usado para se referir as propriedades da área através códigos de scripts;
. Lang: descrição da linguagem-ISO de uma área (exemplo, "text/javascript");
. Language: linguagem, descrição da linguagem de script utilizada nos eventos desta área (exemplo, Javascript);
. Shape: formato da área, esta propriedade pode conter uma destas propriedades: RECT (área retangular), CIRCLE (área circular) ou POLY (área poligonal);
. Style: define a folha de estilos à ser utilizada por esta área;
. Target: serve para especificar o frame ou janela em que o endereço será carregado;
. Title: define a aparência da string (hint). somente no IE 4+.

Estas são propriedades básicas, há outras propriedades no HTML Dinâmico, mas você só poderá obtê-las usando códigos de scripts, mas não falarei delas nesta coluna.

Há também mais uma aba chamada Events, que contém atributos para uso de eventos de linguagens de scripts (Javascript ou VBScript), nestes eventos você pode também suar funções definidas pelo seu próprio script. Estes eventos ocorrem quando o mouse exerce alguma ação sobre a área mapeada. Estes eventos são:

. OnBlur - ocorre quando a área perde o foco;
. OnClick - ocorre quando você clica na área mapeada;
. OnDblClick - ocorre quando você dá um duplo clique na área mapeada;
. OnDragStart - ocorre quando a área é arrastada;
. OnFilterChange - o filtro é aplicado quando o elemento é alterado;
. OnFocus - ocorre quando a área se torna ativa;
. OnKeyDown - ocorre após o pressionamento de uma tecla;
. OnKeyPress - ocorre após o pressionamento de uma tecla e procede enquanto a tecla estiver sendo pressionada;
. OnKeyUp - ocorre quando a tecla pressionada é liberada;
. OnMouseDown - ocorre quando o botão do mouse é pressionado.occurs when the user presses the button of the mouse;
. OnMouseMove - ocorre quando o mouse se move sobre a área mapeada;
. OnMouseOut - ocorre quando o mouse sai da área mapeada;
. OnMouseOver - ocorre quando o cursor do mouse entra na área mapeada;
. OnMouseUp - ocorre quando o botão do mouse é clicado.

Há também outra aba chamada Data, que serve para você definir para lhe poupar algum trabalho, ela contém 2 itens:

. Hint: define o texto da "Janela" popup de ajuda (uma caixinha retangular que aparece quando o cursor do mouse para sobre a área);
. Status: define o texto que irá aparecer na barra de status do navegador quando o mouse estiver sobre a área mapeada.

Repita a operação para todos os outros botões que queria associar a URLs, e pronto! Seu mapa está criado!

Caso você queira alterar alguma coisa, basta usar o ícone de seta e selecionar cada uma das áreas. Você pode inclusive apagar alguma área selecionando-a e clicando com o botão direito do mouse, e depois basta clicar no item Delete Area do menu popup que aparece.

Para salvar o documento, acione o menu File, e clique em Save. Se você verificar agora o código HTML do arquivo, verá que o programa acrescentou o código HTML correspondente ao mapa criado.

Nota: se você quiser incluir alguns comandos HTML basta ir para a aba chamada HTML Source e colocar as tags da sua página lá, preste atenção para não alterar as tags da imagem e nem das áreas do mapa.

Exemplo mapa.html depois do GeoHTML:

<!-- This document was created with GeoHTML 2.1 (http://www.fegi.ru/geohtml/) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Mapa Local de Imagem</TITLE></HEAD>
<BODY>
Exemplo de mapa local de imagem:
<P>
<IMG SRC="mapa.gif" USEMAP="#mapa" WIDTH=200 HEIGHT=200 BORDER="0">
<MAP NAME="mapa">
<AREA SHAPE="RECT" HREF="inicio.html" COORDS="10,9, 59,23">
<AREA SHAPE="RECT" HREF="links.html" COORDS="6,180, 53,193">
<AREA SHAPE="RECT" HREF="biblioteca.html" COORDS="98,93, 190,126">
<AREA SHAPE="POLY" HREF="comentarios.html" COORDS="90,140, 190,168, 181,179, 88,151, 92,142, 90,140">
<AREA SHAPE="POLY" HREF="fotos.html" COORDS="142,12, 149,5, 188,27, 181,36, 142,11, 142,12">
<AREA SHAPE="POLY" HREF="curriculo.html" COORDS="52,53, 130,34, 133,44, 56,64, 54,54, 52,53">
</MAP>
</BODY>
</HTML>

E assim criamos nosso primeiro mapa clicável, sem dor nem susto.