Mapeando Imagens!

Muita gente já sabe esse tutorial né?Mas ainda sim estou postando, pra quem não sabe tenho certeza que será muito útil meesmo!Pra dar opções pra vcs vou explicar as duas formas!

Esse jeito é mais complicadinho mas ainda sim, vamos lá né? Aprendi desse jeito no Cherry Bomb , aliás super recomendo esse blog :]

1.Abra o paint

2.Abra seu arquivo!

 

As coordendas são:

<img src="LINK DA IMAGEM" border=0 USEMAP="#nome" >MAP NAME="name"> <AREA SHAPE="rect" COORDS="0,0,0,0" HREF="LINK"></MAP>

Os números grifados é onde vc vai ir moderando de acordo com os números que representaram seu menu!

3.Pra facilitar é indicado vc contornar o link desejado assim como eu fiz ai em cima!

3.Selecione a opção :Seleçao Retangular

 

 4.Agora nós vamos começar a fazer as coordenadas.Selecione da borda da imagem a imagem do link ( no caso o nome: mapeamento)

Ex:

Sabe os números que pareçem no rodapé do paint?Então,  quando vc selecionar o que deseja com a ferramenta do retangulo os números que precisamos irão aparecer!Fique de olho lá.

5.Agora selecione desde a borda da imagem até o começinho do link ( mapeamento).E coloque o primeiro número que aparecer no rodapé.

6.A próxima coisa a se faser é selecionar agora da borda da imagem até a borda de cima da imagem do link ( mapeando).O numero que vai pra coordenada é o segundo que aparecer lá em baixo.

 

5. Selecione desde  a borda da imagem até o fim do link ( mapeamento).No meu caso as medidas são 92x37.Nas coordenadas vc irá colocar o primeiro número, que no caso é: 92.

  

8.Chegando no final as ultimas instruções são selecionar desde o fim da imagem do link até a borda de cima da imagem.E vc irá colocar o segundo número nas coordenadas, no meu caso o 65:

 

No final meu código ficou assim:

<img src="LINK DA IMAGEM" border=0 USEMAP="#nome" >MAP NAME="name"> <AREA SHAPE="rect" COORDS="92,67,348,103" HREF="LINK"></MAP>

Ta vendo os numeros grifado?Fui moderando ao longo desse processo de mapeamento e ficou assim.Isso com um link, no caso de for mais de um é so ir repedindo o processo com todas as imagens (home, about, parcerias, contato etc.)Para colocar mais , use o codigo:

<img src="LINK DA IMAGEM" border=0 USEMAP="#nome" > <MAP NAME="nome"><AREA SHAPE="rect" COORDS="0,0,0,0" HREF="LINK 1" >

Repita o:<AREA SHAPE="rect" COORDS="0,0,0,0" HREF="LINK 1" >

Quantas vezes necessário e ao final de tudo não esqueça do </MAP> pra fechar o codigo!

É isso o mapeamento no paint requer paciencia ainda mais quando vc tem 5 ou mais links pra mapear ( home,about,parcerias etc.).O segundo jeito creio que vai agradar mais vcs:

Aprendi isso recentemente em um tutorial do Rosa Chiclete!É muito mais simples e prático e inclusive é o jeito mais recomendado por mim =p.Vamos aprender?

1.Crie seu menu

2.Vá para o site: http://www.image-maps.com/

 

3.Abra seu arquivo

4. Vá em "Star Mapping Your Image"

 

5.Vai aparecer essa mensagem acima ai vc clica nela!

 

6.Clique em Rectangle

 

 7.Ai vc vai selecionando os links e colocando o link pra onde vai ser direcionado o link.

 

8.Quando terminar de faser isso com todos os links clique em Get Your Code

 

9.Ai aparece-rá uma pág ai nela tem escrito HTML code, clica ai.Nessa pág tem o codigo que vc precisa pra colocar o menu no blog.É so adicionar gadjet, HTML/Java scrip e cola o codigo, prontinho seu menu ta pronto :)

Beem mais simples né?Escolha o seu metodo preferido e deixe seu blog ainda mais bonito com o menu mapeado!Desculpa o jeito embolado de diser, mas espero que tenham entendido!

Bjs :]