Mapeando Imagens

Ficha T�cnica

Programa: Fireworks Cs3 ou anterior/superior.
N�vel: M�dio. Requer No��es b�sicas de HTML.
Objetivo: Mapear uma imagem utilizando o fireworks.
Resultados:
Pop-Dream

Para quem n�o sabe, mapear imagens � colocar um link em determinado local de uma imagem qualquer, utilizando um editor. O tutorial � simples, mas muito �til! Bom, abra o Fireworks, e fa�a o que quiser. eu fiz a seguite imagem: Ent�o, selecione a ferramenta Rectangle Hot Spot Tool () teclando J e fa�a um quadrado sobre o local que quer mapear.

Exemplo


Feito? � s� salvar ent�o. Tecle Ctrl+Shift+R ou v� em file --> Export.

Salvando


Agora vamos com o html. Na pasta que voc� salvou o arquivo, deve ter um arquivo html com o mesmo nome colocado na imagem. Bom, eu recomendo que para a edi��o voc� use um programa como o MAX's HTML Beauty++ 2004. Voc� pode baixa-lo no Baixaki.com.br. Se voc� n�o tiver um editor Html, use o Bloco de Notas.
Abra o Arquivo e localize as seguintes linhas:

<img name="resultadomap" src="resultadomap.gif" width="300" height="300" border="0" id="resultadomap" usemap="#m_resultadomap" alt="" /><map name="m_resultadomap" id="m_resultadomap"> <area shape="rect" coords="121,20,257,82" href="http://pop-dream.zip.net" target="_blank" title="Pop-Dream" alt="Pop-Dream" /> </map>

Copie-as (ctrl+c) e cole (ctrl+v) no local que voc� quer que a imagem apare�a.
E n�o se esque�a, voc� deve colocar a imagem na net, voc� pode fazer isto no TinyPic.com ou no PhotoBucket.com e substituir o src pelo endere�o da imagem.

<img name="resultadomap" src="ENDER�O DA IMAGEM" width="300" height="300" border="0" id="resultadomap" usemap="#m_resultadomap" alt="" /><map name="m_resultadomap" id="m_resultadomap"> <area shape="rect" coords="121,20,257,82" href="http://pop-dream.zip.net" target="_blank" title="Pop-Dream" alt="Pop-Dream" /> </map>

=D

D�vidas

� Me pessa ajuda pelo MSN: [email protected].
� Me envie um e-mail: Clique Aqui
Voltar|Avan�ar

Hosted by www.Geocities.ws

1