Oficina de Mídia Digital



O que são?

Image Maps são "Mapas de Imagem", isto é, uma imagem mapeada para diversos links. Veja, por exemplo, aquela "barra de navegação" que vemos acima de todo e qualquer site no UOL (http://www.uol.com.br/) é um "image map".

Como criar

Bem, primeiro eu quero esclarecer que existem dois tipos de image maps, um deles é o "Server Side" e o outro o "Client Side".  A diferença é que uma funciona no "servidor Internet" (onde seu site está e onde todos o acessam) e a outra no browser do visitante (quando ele acessa seu site as informações vão com a página).

Falaremos agora sobre a Client Side, que é a mais utilizada e a mais fácil também.

Para criar um Image Map você precisa de três coisas básicas:

1) Uma imagem a ser mapeada

2) Uma página HTML onde a referência a esta imagem estará.

3) Um programa para mapear a imagem (ou vc é louco como eu e quer mapear "na mão"???)

Nós vamos ensinar aqui como mapear uma imagem "na mão" e depois você pode pegar o LView Pro ou similar para facilitar o processo.

3) As tags

IMG, MAP e AREA.

Na tag IMG voce deve inserir o comando USEMAP indicando o nome do mapa. Por exemplo:

<IMG SRC="menu.gif" BORDER="0" USEMAP="#menusite">

Entao, vc utiliza a tag MAP para criar o mapa. Mais ou menos assim:

<MAP NAME="menusite">

PRESTE ATENÇÃO !!! O modo como você digita o nome do "mapa" é importante,
pois MenuSite é diferente de menusite.

MAP é uma tag que você abre e fecha... tipo as tags:

<A HREF="link.htm">Link !!!</A> e <TABLE>..Tabela..</TABLE>.

Não se esqueça de colocar a tag </MAP> ao final do seu mapa!!!

A ultima tag é AREA, que serve para indicar que parte da imagem está linkada com que arquivo. Vamos como o Jack Estripador, por partes:

<AREA SHAPE="" HREF="" COORDS="">

A TAG <AREA> NÃO É "FECHADA", AO CONTRÁRIO DE <MAP></MAP> !!!

Não existe uma tag </AREA>, ok???

O primeiro parâmetro obrigatório é SHAPE, que indica o "formato" da área a ser mapeada. Pode ser RECT (retângulo), CIRC (círculo) ou POLY (polígono). Vamos tratar do RECT, que é o mais fácil.

Nossa tag então está assim: <AREA SHAPE="rect" HREF="" COORDS="">.

Bem, então sabemos que nossa área será um retângulo, mas ele irá "linkar" para que arquivo?? É para isso que utilizamos o HREF="arquivo.htm", é nele que colocamos o "destino" do visitante que clicar nesta área do mapa. Então nossa tag está assim, agora:

<AREA SHAPE="rect" HREF="arquivo.htm" COORDS="">

Falta apenas dissecar o comando COORDS="x,y x,y", que indica as COORDENADAS da imagem a ser mapeada, em pixels.

As coordenadas para a demarcação de um retângulo seguem a fórmula:

COORDS="cantosuperioresquerdo cantoinferiordireito"

Use as coordenadas de altura e largura para indicar os pontos, separando-os com um espaço simples, assim:

COORDS="10,10 50,100"

Esse é apenas um exemplo, acho que já está bastante claro!

E ainda existem os comandos opcionais NOHREF e TARGET, que servem, respectivamente, para indicar que o clique naquela área não abre nenhum arquivo e para indicar qual o alvo do link, em caso de frames (igual ao comando A HREF normal).

Aqui está um exemplo de código HTML para inserir uma imagem mapeada:

<IMG ALIGN="middle" SRC="download.gif" BORDER="0"  USEMAP="#MENU">
<MAP NAME="MENU">
    <AREA SHAPE="rect" COORDS="10,10 25,15" HREF="teste.htm">
    <AREA SHAPE="rect" COORDS="20,60 85,50" HREF="teste2.htm">
</MAP>

Conteúdo gentilmente cedido pela Advanced Infohouse® Home Help