quinta-feira, 1 de julho de 2010

Como fazer um link rollover

Vocês devem ter notado, no topo do meu Blog, uma imagem, em que quando você passa o mouse em cima, muda, hoje, vou mostrar a vocês como fazer isto.
1) Tenha um lugar para hospedar as novas imagens (pode ser o imageshack.us).
2) Copie sua imagem e, nesta nova, aplique qualquer tipo de efeito.
3) Usando um programa para editar imagens, crie uma nova imagem com a mesma largura que a antiga, e o dobro da altura da antiga e salve.
4) Envie esta nova imagem para o local que você escolheu para hospedar a imagem.
5) No seu Blog, vá em Design, Editar HTML.
6) Procure por "]]>" e, antes do ]], crie uma nova linha.
7) Nesta linha, copie e cole, trocando o imagem pelo local da sua imagem, o LARGURA pela largura da imagem e ALTURA pela altura da imagem antiga:

#Header1_headerimg {
width: LARGURApx;
height: ALTURApx;
background: url('imagem');
background-position: 0px 0px;
}
#Header1_headerimg:hover {
background-position: 0px ALTURApx;
}
 
8) Agora vá em elementos da página, no cabeçalho, clique em editar.
9) Em imagem, mude o posicionamento para "Ao invés de título e descrição".
10) Se existir outra imagem já, ignore, senão, clique em "Remover imagem".
11) Envie uma imagem transparente para onde você hospedou a nova imagem.
12) Mude a imagem (cabeçalho do Blog) para o caminho da imagem transparente.
13) Salve e salve novamente.

Se tudo correu bem, o seu Blog agora terá uma imagem que, quando o mouse passa por cima, muda.