AULA 20: Criação de mapas clicáveis

NESTA AULA
Vamos aprender o que são image maps, a sua importância, como funcionam e como criar os seus próprios image maps.

O que são?

Os images maps (ou imagens mapeadas) não são mais do que imagens com vários links, onde cada um dos links é definido através das suas coordenadas na imagem.
Imagine uma imagem com duas partes, uma preta e outra branca, imagine também que quer que cada uma das partes aponte para uma diferente secção do seu site, este seria um caso onde poderia utilizar image maps, poderia também criar duas imagens e linkar cada uma para seu sítio, mas se este argumento se aplica para este caso, já não se aplicaria numa situação onde estivesse a criar uma barra de navegação que apontasse para cada uma das 10 secções do seu site.

Porquê utilizar

Para poupar trabalho, pois se não existissem os images maps teria de criar (por exemplo) 10 imagens, cada uma com o seu texto, e provavelmente teria de colocar essas imagens dentro de uma tabela para que ficassem alinhadas e depois teria que linkar cada uma das imagens para a secção correspondente.
Os images maps são importantes não só por isto, mas também porque têm uma palavra a dizer na rapidez das páginas.
Imagine que está numa esplanada de um café e pede uma cerveja, o empregado pacientemente vai buscar e entrega-lhe a cerveja, depois você lembra-se que uns rissóis vinham mesmo a calhar, torna a chamar o empregado e pede-lhe os tão apetecidos rissóis, este por sua vez volta à cozinha de onde lhe trás o petisco, mas depois de você olhar para os rissóis apercebe-se que eles não eram do tamanho de que estava à espera e resolve então pedir mais qualquer coisa, o empregado por sua vez teria que se dirigir (mais uma vez) à sua mesa perguntar-lhe o que queria e depois ir buscar o seu pedido. Se tivesse pedido tudo de uma vez tinha poupado algum trabalho ao empregado e algum do seu tempo. Isto é em tudo semelhante ao que acontece entre o servidor e browser no que toca às imagens, cada imagem que o browser carrega tem que ser pedida ao servidor que por sua vez envia a imagem pedida, se criar um image map estará a pedir tudo de uma vez só.

Tipos de image maps

Existem dois tipos de image maps, os ''client side'' e os ''server side'', isto quer dizer (respectivamente) do lado do cliente (o seu browser) ou do lado do servidor onde a página está alojada.
Os ''server side'' image maps já caíram em desuso, eles começaram por ser utilizados porque os browsers não tinham a capacidade de interpretar essa informação (as tais coordenadas), isto já não acontece hoje em dia, por isso vamos limitar-nos à segunda opção.

Como criar e utilizar

A utilização de image maps é bastante simples, o seu tag é semelhante ao tag de imagem normal, com a diferença da informação de que é um image map, e de todas as coordenadas, conjuntamente com a forma da secção linkada e do URL para onde aponta. Um image map deverá ter um aspecto semelhante a este, neste caso utilizamos para exemplificar o ficheiro barra.gif

<img src="barra.gif" width="460" height="50" border="0" usemap="#barra">

<map name="barra">
<area shape="rect" coords="214,29,289,42" href="/index.html">
<area shape="rect" coords="291,29,348,42" href="/conteudo.html">
<area shape="rect" coords="350,29,396,42" href="/opiniao.html">
<area shape="rect" coords="378,1,448,23" href="/cartoon/index.html">
<area shape="rect" coords="303,1,376,23" href="/livraria/index.html">
<area shape="rect" coords="256,1,301,23" href="/web/index.html">
<area shape="rect" coords="194,1,254,23" href="/jogos/index.html">
<area shape="rect" coords="111,1,192,23" href="/software/index.html">
<area shape="rect" coords="14,1,109,23" href="/tecnologia/index.html">
<AREA SHAPE="DEFAULT" NOHREF>
</map>

A explicação

O tag img lá está, com todos os atributos do costume o src para indicar qual a imagem, o with e o height para definir as suas dimensões, o border igual a zero para retirar a borda, e agora as novidades, e o usemap que diz ao browser que aquela imagem é um image map e onde ir buscar a informação sobre que zonas da imagem apontam para onde. Essa informação está (como indicado no atributo usemap) no tag map com o respectivo name (nome), entre esse tag está então a valiosa informação sobre as zonas a linkar. O tag area, que só pode ser usado dentro do map, contém alguns atributos (óbvios para quem sabe um pouco de inglês) que definem o seguinte: o shape diz qual é a forma da área, e pode ser rectangular, círculo, ou polígono (outra forma a definir), o coords indica as coordenadas da respectiva área, por ultimo o href é o local para onde a secção definida deverá apontar. Existe ainda o atributo alt que funciona da mesma forma que funcionam o alt das imagens.

Se olhou para o exemplo com atenção deverá ter reparado que existe ainda um ultimo tag onde o shape está definido como default, este atributo diz respeito a toda a área que não é coberta pelas secções definidas em cima. Neste caso optamos por colocar o nohref, que quer dizer que a a área da barra que não está coberta pelas secções não aponta para lado nenhum. Poderíamos ter indicado um outro href à semelhança do fizemos para as outras áreas.

Tudo isto à mão?
Não se preocupe, não vai ter que criar tudo isto à mão, é importante que tenha ficado com uma ideia de como funciona, pois o trabalho sujo será feito de outra forma. Para isso vamos utilizar um criador de image maps, nós escolhemos o Splash Image Maper, porque tem um interface bastante agradávél e porque tem um tamanho reduzido (cerca de 1Mb). Existem dezenas de editores de image maps, existem inclusivé alguns programas de tratamento de imagem que já trazem opção para a criação de image maps como é o caso do Fireworks da Macromedia. Se não lhe agradar a nossa escolha não tenha problemas em fazer o download de outro, todos eles funcionam de forma semelhante.

Ao trabalho

Antes de mais precisa de criar a imagem que pretende mapear, o caso mais vulgar é o das barras de navegação. Crie então a sua imagem, nós optámos pelo exemplo inicial, o tal quadrado com duas partes. Vamos então fazer com que cada uma das partes aponte para uma página diferente. Abra o Splash e seleccione no menu File a opção load image, depois de ter a sua imagem carregada vá ao menu Shapes e escolha qual a forma que pretende, no nosso caso vamos escolher rectangular, o seu ponteiro deverá mudar de acordo com a forma que escolheu, depois disto só tem de seleccionar as áreas que pretende linkar, e escrever qual é o url para que deve apontar. Feito isto resta ir ao file e fazer export, ai encontra duas opções ''to file'' e ''to clipboard'' se escolher to file, o Splash grava-lhe um ficheiro .html se abrir esse ficheiro com o notepad poderá então ver o resultado final, bastará então copiar esse bocado de html para a página onde o pretende inserir. Se escolher to clipboard, basta ir ao html onde quer colocar o image map e fazer ''paste'' ou crtl+v e já está, nada mais simples. Pode ainda (e deve) gravar o image map, se o fizer, escolhendo a opção ''save'', ele ficará guardado num ficheiro com uma extensão própria do Splash.