Tutorial - Aprendendo a mapear uma imagem

OLá gente, bom eu fiquei boba com esse tutorial por que tipo ele e muito fácil e útil
para quem não sabe o que é isso vou explicar Você irá criar uma imagem por exemplo um cabeçalho com um menu também personalizado só que para você, fazer aquele menu funcionar e colocar o link no devido quadrinho é preciso mapear, então vamos começar. O tutorial e lá do Word Girl então os créditos a ele.

1º) vá ao site Image Map Tool E carregue uma imagem, clicando em Selecionar um arquivo, ou seja a imagem que você quer mapear, ja deve estar feita, então abra.

Apois ter carregado a imagem Clique em Start Mapping Your imagem.A imagem irá carregar... E vamos ao segundo passo.

2º)Abrirá outra página na qual a sua imagem irá carregar, espere os segundos que eram ser contados nesta página e logo abaixo aparecerá sua imagem... e um link CONTINUE TO NEXT STEP.. clique!

3º) Agora sim vocÊ irá mapear a sua imagem... vocÊ será direcionado a outra página, no qual será efetuado o mapeamento. Preste bem atenção nesta atapa, não é complicado mais exige atenção.

 -Clique em Rectangle. (retangulo) para que apareça a feramente de mepeamento... 

Araste o retangulo ate o local da imagem que será mapeado... no caso o meu primeiro link foi o Home, página inicial...Clique nas laterais para aumentar o retangulo conforme o tamanho do seu buton...

Na primeira linha ali é onde ficará o URL da sua home page, ou seja o endereço do inicio no blog.

Abaixo é onde ficara a legenda, ou seja escreva abaixo dela, inicio, voltar... e tals se não quiser não precisa.

-Clique em SAVE. e repita o processo quantas vezes sua imagem exigir. em todos os butons onde ficarão os links...

 Atenção: Na lateral existem vários quadradinhos marcados como vocês podem ver na imagem... Desmarque todos eles.... não deixe nehum marcado!

4º)Apóis mapear toda sua imagem... click no botão "Get your code." (fica logo abaixo de rectagle.)

E novamente você irá a outra página, onde você ira visualizar um testo e logo acima um painel com vários links, clique em Html code. para salvar seu código.

Irá aparecer o código do seu mapeamento, copie e cola no lugar do cabeçalho, se for o caso... ai no meu mapeamento o código ficou pequeno isso por que foram muito poucos os links, mais se o sue tiver mais... naturalmente o código será maior...

créditos: Word Girl

beijos, Fabíola