Como mapear imagens.

Hoola! Genteen  hoje eu queria muito ensinar a vocês como mapear imagens, e é isso que eu vou fazer! Não é necessário baixar nenhum programa ou entrar em sites, é só pelo Paint *-*

Bom, pra quem não sabe, mapear uma imagem é colocar um link nessa imagem, usando um CLICA AQUI, ou o nome do blog/site  ou coisa do tipo...

Então você vai lá, fazer sua imagem bunitinha, e abri-la no Paint. Depois disso,  Clique ali em baixo em continue lendo

Bom, é muito simples. Após ter aberto a imagem no Paint, você vai usar a ferramenta de retângulo para contornar a parte que você deseja mapear.

Feito isso, você vai usar a ferramenta de seleção, desse modo:

Dessa maneira, você vai usar este código, usando as informações do seu blog e da sua imagem. Hospede a imagem e um site de hospedagem, eu prefiro usar o Tiny Pic, mas escolha o seu favorito

 Abra o bloco de notas e cole:

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

O meu ficou assim:

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

Todos estes números representam:

Bom, o nº 189 é a horizontal, do início da imagem até o início do retângulo em vota do texto ( ** x ** )

O nº 151 é a vertical, do inicio da imagem lá em cima até o começo do retângulo ( ** x **)

O nº 394, é o início da imagem horizontalmente até o fim do retângulo ( ** x ** )

Já o nº 195, é do início da imagem de cima pra baixo, até o fim do retângulo ( ** x ** )

Tá bem explicadinho? Caso não esteja, é muito fácil:

Todos esses número aí de cima, vão ser determinados pela ferramenta de seleção do Paint, para saber que números serão, você olha lá em baixo, no fim da tela, vão ter dois números no formato de  0 x 0 :

O número 189 é  da horizontal, e você vai usar no 1º e no penúltimo número do código:

<AREA SHAPE="rect" COORDS="189,151,394,195" HREF="LINK"> 

189= Início da img até o início do retângulo do texto
394= Início da img até o fim do retângulo do texto


O número 21 é da vertical, e será usado no 2º e no ultimo número do código:

<AREA SHAPE="rect" COORDS="189,151,394,195" HREF="LINK">  

151= Início da img de cima pra baixo até o início do retângulo do texto
195= Início da img de cima pra baixo até o fim do retângulo do testo

Lembrando que os números vão variar de acordo com as dimensões da sua imagem. Esse aqui foi só num exemplo.

Se você quiser mapear várias áreas da sua imagem, faça o mesmo procedimento várias vezes, e use o seguinte código:

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

HREF="LINK" é o link que você quer que apareça quando a pessoa clicar na área mapeada.


Por hoje foi só, espero que tenham gostado '-'

Beijos ;*