TUTORIAL MAPEAMENTO NO LAYOUT
Bem, o que é mapeamento?
Vcs sabem quando há um menu no layout, há vontade de clicar e o desejo que esta página abra, não é?
Bem, para isso é necessário:
Ter PhotoShop
e ImageReady
É isso que vcs farão:
Passe o mouse e clique nas partes: "HOME, GOODIES, I'VE DONE, HELP, LINKS"
O Mapeamento NÃO atrapalhará o seu layout. Não será necessário hospedá-lo separadamente do template. Não faça esse menu separadamente da imagem que vc quer que ele fixe-se. A imagem que utilizo é só para simplificar, mas imagine-a com o templante inteiro.
Bom, faça uma layout, ou coisa do gênero que tenha um menu numa imagem, no PhotoShop ou em outra lugar,
logo após, clique no item que passa o PhotoShop para o ImageReady, o responsável pelo mapeamento, na barra de ferramentas.
Pronto, estamos no ImageReady...
Agora vá em JANELA ou FILE,em cima da tua tela, e clique em MAPA DA IMAGEM ou SHOW IMAGE MAP.
Onde abrirá uma janelinha...
Animação-Animation
Mapa da Imagem-Image Map
Fatia-Slice
Só faltou o Rollover...
Agora, com a ferramenta de um quadrado com um mouse clicando, selecione (faça um quadrado) em volta da parte que vc quer mapeada.
Quando vc terminou de selecionar, o quadrado ficará vermelho com alguns pontos, nestes pontos vc pode aumentá-lo ou diminuí-lo (o quadrado).
Vc selecionou, certo? Agora, na janelinha do MAPA DA IMAGEM ou IMAGE MAP, complete:
NOME-NAME: COLOQUE AQUI O NOME, exemplo: Home
URL: COLOQUE UM EXEMPLO DE URL PARA NÃO SE PERDER NA HORA DO CÓDIGO: www.home.com.br
Agora, faça em todos os lugares que achar apropriados.
Depois de selecionar em volta da palavra, sempre complete a janelinha, após, continue selecionando outras partes ^^
Agora vc terminou de selecionar, né? Vá no item da Internet Explorer da sua Barra de Ferramentas e clique. Isto tudo é no ImageReady.
Aparecerá uma página com a sua imagem MAPEADA e seu respectivo código.
Tente clicar na parte que vc quis mapear e veja como ficou ^^
É a partir deste símbolo de código que vc colocará no seu template:
<*!-- ImageReady Slices (SUA IMAGEM.jpg) --*>
e terminará com este:
<*!-- End Image Ready Slices--*>
Agora no código, colando-o no bloco de notas, mude o que se pede:
P.S.: A tag <*/script> é a tag que termina o código CSS, o código que define a sua cor da letra, da barra de rolagem...
P.S2.: Hospede no PhotoBucket.com ou no ImageShack.us o seu template por inteiro: 800 x 600 ou 650 x 400 ou o que vc fez.
E coloque o seu respectivo endereço no: "COLOQUE AQUI A URL..." <-- fazendo isso, não precisará de outra parte perto da linha do seu template, para colocá-lo.
P.S3.:O <*!-- INÍCIO PERSONALIZAÇÃO --*> É a partir da onde vc colocará as suas coisinhas, tipo calendário, contador, midi players, relógio, fans, tudo o que vc consegue no Laurinha's ^^
Colocando no código no layout do seu blog e salvando, ele ficará mapeado quando alguem entrar nele, e a pessoa vai poder clicar e se divertir.
Fim ^^
Resultado:
DÊ OS CRÉDITOS!