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, 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"> |
|
Conteúdo gentilmente cedido pela Advanced Infohouse® Home Help