Tutorial: Como mapear uma imagem

 Olá todos. Estou aqui para ensinar a vocês a mapear uma imagem.
 Vi esse tutorial no blog Cherry Bomb, e achei interessante e útil, então decidi postar aqui pra vocês, mas, recentemente, encontrei um site muito útil que mapeia as imagens pra gente, ele é melhor pra quem não tem muito conhecimento com HTML.
 Mas, o tutorial de como mapear imagens que eu irei postar aqui, por mim, é fácil.
 Os créditos são totais ao blog Cherry Bomb.
 Não sabe pra que serve Mapear uma Imagem? Deixa que eu explico: sabe quando você quer uma imagem, mas com um link em cada "botão", por exemplo? Então, dá pra fazer isso.  Mapeando a imagem.
 Saiba o que fazer depois clicando em Leia Mais >>

---

 Primeiro: você tem que ter a imagem.

 Depois que você tiver a imagem que quiser, vai ter que hospedá-la em algum lugar, sugiro que hospede no Tinypic, porque é o que eu uso.

 Depois que hospedar a imagem, copie a URL dela como mostra na imagem:

 A imagem que usarei de exemplo é essa:

 Agora que você já tem a imagem, vamos pra parte mais difícil. 

 Abra o Bloco de Notas e cole esse código: 

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

 Se você for mapear várias áreas em uma imagem é só adicionar o código das coordenadas no código ACIMA da tag </MAP>, assim:

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

<AREA SHAPE="rect" COORDS="0,0,0,0" HREF="LINK 3">

</MAP>

 - Abra o Paint e faça um retângulo em volta da área que quer que se torne um link:

 - Depois selecione a opção "Selecionar" é um ícone em forma de retângulo que fica lá em cima na barra lateral; para colocar a primeira coordenada no seu código faça uma seleção do início da imagem até a borda esquerda do retângulo:

 - Lá no canto, no rodapé do Paint, vai aparecer uns números de medida:

 - Essas são as medidas da seleção que você fez, use o primeiro número (o meu é 125) como a primeira coordenada do código:

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

 - Vamos fazer a próxima coordenada, mas dessa vez pegando do topo da imagem até a borda superior do retângulo:

 - Agora, para a segunda coordenada use a segunda medida (ex.: 213 x 171).

 O código vai ficar assim:

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

 - Vamos para a terceira medida; faça uma seleção desde o começo da imagem até o fim do retângulo:

 - Veja lá no rodapé qual é o primeiro número e coloque-o no código.

 - Para a última coordenada, faça uma seleção desde o começo da imagem até o a parte inferior do retângulo:

 - Coloque no código a segunda medida, mostrada no rodapé;

 Pronto!! Você mapeou uma imagem! Agora pegue o link da imagem que você hospedou no início deste tuto. Coloque o link da imagem onde está pedindo no código.

 Agora a parte mais fácil, copie o código que você fez e cole onde você quiser. Você pode colocar em uma postagem. É só ir em Editar HTML na parte superior da postagem e cole lá.

---

 Aprenda a Mapear uma imagem através do site Image Maps.

 Eu descobri esse site enquanto eu lia o blog Menina Nerd.

 É mais fácil que mapear a imagem através de HTML como eu expliquei acima.

 Vamos lá (de novo). 

 Primeiro Passo: Acesse o site, clique aqui.

 Segundo Passo: Abra a sua imagem onde está dizendo "From your PC". Você também pode colocar a URL da imagem que você quer, onde está dizendo "From a URL".

 Terceiro Passo: espere que um timer regressivo chegue ao 0 (óbvio) e clique no link que vai aparecer lá em baixo. "Continue to next step".

 Depois clique em "Rectangle"; faça uma seleção em volta da onde você quer que fique com link. Em "Link For This Map" coloque o link; e em "Title/Alt for this map" digite o que você quer que apareça quando você colocar o mouse em cima da área do link.

 Para mapear diversas vezes clique em "Rectangle" e faça o mesmo processo.

 Depois de ter mapeado todas as áreas que você quer, desmarque as opções no quadro da direita. As opções que você tem que desmarcar é:

Base URL

Show Text Links

Allow Backlink

 Desmarque todas essas. 

 Agora pegue seu código (Get Your Code); vá em HTML Code que vai aparecer lá em cima.

 Copie o código; vá em Design > Adicionar um Gadget > HTML/JavaScript e cole o código lá.

---

 Espero que tenham gostado deste tutorial, pois é o primeiro tuto que eu posto no TSC. Comentem!!