Você está em: Home >> Tutoriais >> Mapeamento
Esse tutorial vai ensinar a mapear a área de qualquer imagem para que tal área fique como link.
Programa necessário: Paint
1. Escolha a imagem que deseja mapear e hospede-a.
2. Este é o código que você terá que usar:
3. Abra sua imagem no Paint, a que eu escolhi foi essa:
4. Agora para facilitar a vida faça um retangulo na área que você quer que vire link, eu fiz na palavra 'Entrar'.
5. Agora temos que medir as coordenadas, veja a imagem abaixo:
Nas coordenadas você deve colocar 4 números. O primeiro número é a primeira borda (a que está de verde no desenho), para medir, pegue a ferramenta de seleção e meça na borda do retangulo feito até a borda da imagem, como na figura. A medida vai aparecer no rodapé do Paint.
Pegue o primeiro número, o da esquerda. Esse será o primeiro número da coordenada.
6. Achando os outros números - O segundo número será a medida indicada em rosa, e dessa vez você terá que pegar o segundo número, o da direita, que aparece lá no rodápé do Paint.
7. A terceira medida da coordenada é a indicada em amarelo, meça e pegue o primeiro número lá do rodapé.
8. A quarta e última medida é a indicada em azul, meça e pegue o segundo número do rodapé.
9. Colocados os números das coordenadas, em IMAGEM_PARA_MAPEAR_URL coloque a URL da sua imagem hospedada. Em REFERENCIA coloque o site/página que deseja abrir quando clicar na área mapeada. Coloque TODO o código dentro do body de seu blog!
10. Você pode colocar várias áreas mapeadas em uma única imagem, o código ficaria assim:
11. Por fim, olha como ficou minha imagem:
Espero que esse tutorial tenha ajudado, se ajudou, credite-me , se não ajudou me mande um comentário para me ajudar a melhorá-lo.