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 de 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.
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 esse recurso à sua home page, mas como não queremos que você saia por aí sem saber o que está fazendo, que tal primeiro entendermos um pouco melhor como tudo isso funciona?
9.1 - 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 Locais de Imagens (Client-Side Image Maps) e o Mapa Remoto 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 é clara e extremamente importante. O mapa remoto é uma combinação de CGI (Common Gateway Interface), HTML e um "arquivo de mapa" que nada mais é do que um arquivo que informa as regiões sensíveis da imagem e que reside no servidor de Web. Este método funciona da seguinte maneira:
Quando você clica sobre uma região sensível de uma imagem, o browser 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 a região clicada, e envia essa URL de volta para o browser, 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 pode ser interessante.
Então, podemos dizer que o mapa local de imagem produz uma melhor utilização da rede, gerando um tráfego menor, diminuindo a carga de pedidos para o servidor de Web e aumentando a performance do browser, já que o tempo de resposta fica reduzido ao pedido da URL. Não é tudo o que a gente quer? Então, esse será o método escolhido - Mapa Local de Imagem.
9.2 - SENSIBILIZANDO AS IMAGENS
Essa tarefa será dividida em duas partes, a criação do documento HTML e do mapa de imagem. Utilizando qualquer editor de sua preferência, adicione a imagem que deseja sensibilizar ao código HTML de sua página com o TAG <IMG SRC ...>.
Exemplo:
<HTML>
<HEAD>
<TITLE> Imagens sensíveis à cliques de mouse </TITLE>
</HEAD>
<BODY>
<H3>Exemplo de imagem sensível ao clique de mouse</H3> <BR>
<IMG SRC="exemplo.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, você vai precisar de um software especial conhecido como "MAPEDIT", para definir as regiões sensíveis da imagem. Vá até http://www.boutell.com/mapedit/#download, e escolha a versão mais adequada para você - Windows 95, Windows 3.1, etc… Em nosso exemplo iremos utilizar a versão de 32 bits para Windows 95.
Após descompactar o software, execute-o. A primeira tela que surgirá para você será "Open/Create Map". Clique no botão "Browse..." ao lado de "Map or HTML File", para localizar o arquivo HTML editado anteriormente - em nosso exemplo exemplo.htm.
Ao selecionar o arquivo, uma nova janela surgirá com a lista de todas as imagens inseridas no documento HTML - em nosso exemplo só inserimos uma, exemplo.gif. Posicione o cursor sobre o nome da imagem que deseja sensibilizar e clique "Ok".
Observe que a primeira janela mostrada, está agora preenchida com todas as informações necessárias. Clique "Ok" e a imagem escolhida será apresentada para você.
Chegamos ao momento mais importante - associar áreas da imagem às URLs.
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 - os quatro botões da barra de navegação, procura, comentário, correio e internet.br. Marque a área do primeiro botão mantendo o mouse clicado, solte-o e em seguida dê um clique. Surgirá uma janela "Object URL".
Em "URL for clicks on this objects", informe a URL associada à esta área. Na verdade, o que irá acontecer é que quando essa região - que agora funciona como um botão - for clicada, a página referente a URL fornecida será carregada. Repita a operação para todos os outros botões que queira associar à URLs.
Pronto, seu mapa está criado! Você pode salvá-lo acessando o menu "File", opção "Save" e observe que em "Save As format" a opção "Client Side Map (HTML)" deverá estar selecionada. O MAPEDIT adicionará algumas linhas ao seu código HTML, e a versão final dele deverá ser algo mais ou menos como o mostrado abaixo:
Arquivo exemplo.htm depois da utilização do MAPEDIT:
<HTML>
<HEAD>
<TITLE> Imagens sensíveis à cliques de mouse </TITLE>
</HEAD>
<BODY>
<H3>Exemplo de imagem sensível ao clique de mouse</H3><BR>
<IMG SRC="navega.gif" BORDER="0" usemap="#navega">
<map name="navega">
<area shape="rect" coords="0,0,158,33" href="procura.htm">
<area shape="rect" coords="161,0,317,32" href="comenta.htm">
<area shape="rect" coords="323,0,479,32" href="correio.htm">
<area shape="rect" coords="483,0,641,32" href="internetbr.htm">
<area shape="rect" href="navega.htm" coords="0,0,640,32">
</map>
</BODY>
</HTML>
Existe um conceito importante que é o de "URL default", que é utilizado para definir a URL que deve ser carregada sempre que for clicada uma região que não tenha sido definida no mapa. No menu "File", opção "Edit Default URL ...", você deve informar a URL da própria página corrente, em nosso exemplo seria exemplo.htm. Assim, sempre que uma região não definida da imagem for clicada, nada de diferente irá acontecer.
Duas opções importantes do MAPEDIT que você deve conhecer: o ícone da "seta", na barra de ferramenta, é utilizada para testar o mapa e o ícone ao lado, algo como um círculo com traços, permite que você altere a área previamente definida do mapa. Muito utilizado nas correções.