Mapeamento
Programas necessários: Image Ready (vem junto com o Photoshop) ou Fireworks
1º Passo: Abra o Image Ready ou Fireworks.
2º Passo: Abra o seu template pronto.
3º Passo:
Image Ready: Selecione a ferramenta "Mapa de Imagem" (P). Se o seu mapeamento for "reto" (na horizontal ou na vertical), escolha a ferramenta Mapa de Imagem em Retângulo (
). Se seu mapeamento for em círculo, selecione a ferramenta Mapa de Imagem em Círculo (
). Se seu mapeamento for em diagonal ou coisa parecida, selecione a ferramenta Mapa de Imagem em Polígono (
).
Fireworks: Selecione a ferramenta "Hotspot Tool" (J). Se o seu mapeamento for "reto" (na horizontal ou na vertical), escolha a ferramenta Rectangle Hotspot Tool (
). Se seu mapeamento for em círculo, selecione a ferramenta Circle Hotspot Tool (
). Se seu mapeamento for em diagonal ou coisa parecida, selecione a ferramenta Polygon Hotspot Tool (
).
4º Passo: Agora você vai passar com essa ferramenta em toda a parte do mapeamento que tem no seu template. Quando fizer o primeiro, você vai ter que achar uma janela com o nome de:
Image Ready: "Animação" (Animation) [nessa janelinha, clique em Mapa de Imagem]
Fireworks: "Properties"
Nessa janela, depois de você ter passado a ferramenta no primeiro link do template, vai ter que aparecer uns espaços escritos: Nome (Name), URL, Destino, Alt / Link, Alt, Target...
Nesses "espaços", você vai ter que completar com os dados do mapeamento de cada link:
Nome: Nome do Link. (não é necessário)
URL/Link: É o endereço da página que vai abrir ao clicar
Destino/Target: É o "destino" que o endereço vai. Se você usa Iframe, coloque o nome do iframe. Se quer abrir em uma nova janela, coloque "_blank". Se quer que abra na mesma janela, não coloque nada.
Alt: É a descrição do link. (não é necessário)
Quando acabar de preencher, não clique em mais nada. Apenas vá para o próximo selecionamento. (passar a ferramenta...)
5º Passo: Faça isso em todos os "links" que tiver para fazer.
6º Passo: Após acabar:
Image Ready: Aperte Ctrl + Alt + P. Irá abrir uma nova página (de navegação da Internet) com o código do seu mapeamento. Nessa página, vai aparecer o seu template em cima, e embaixo, o código. Nesse código, você tem que copiar apenas uma parte:
Fireworks: Aperte F12. Irá abrir uma nova página (de navegação da Internet). Nessa página, clique em "Exibir/Código Fonte". Vai aparecer o código. Nesse código, você tem que copiar apenas uma parte:
7º Passo: Cole em seu código HTML entre as tags body e /body (aconselho colocar bem no início do body)
8º Passo: Nesse código que você colou, você precisa editar apenas uma coisa. Em IMG SRC="images/3.jpg", você tem que trocar o "images/3.jpg" (no meu caso), pelo endereço original da imagem (hospedado...)
9º Passo: Salve o seu HTML com o mapeamento.
Pronto! Seu mapeamento está pronto!
Tutorial feito por mim! Qualquer cópia é totalmente proibida!
