Image Map

03/01/2012

Menu com efeito hover

Bom dia meus pirulitos arco-íris
Hoje eu venho com a minha primeira dica de html ( goodie ) que é sobre como fazer um menu com efeito hover, que é esse efeito do nosso, com a imagem que muda ao passar o mouse. Eu vi esse código lá no Go Imagine (créditos deles ), e retirei de lá, mudei algumas coisinhas ( quase nada ) e fiz imagens pra vocês.
O efeito é esse ( passe o mouse para ver o efeito ) :


Vamos lá ? 
 Primeiro você tem que fazer as suas imagens ( ou pegar as que eu vou colocar no final do post ). Pra pegar o link da imagem, você tem que : ou colocar ela em um site de hospedagem de imagens ou deixar ela linkada em algum blog pra testes, clicar nela, pegar o link e aí colocar ( é assim que eu faço, haha ). Pra facilitar pra vocês, eu vou deixar essas aqui linkadas. 
  Depois de ter as imagens, e os seus links, vá em Design > Elementos de pág. > Adicionar um gadget > HTML/Javascript. Assim que abrir, coloque o seguinte código :
 

 
Agora vamos editar o código (o da caixinha). Troque a frase 'link do seu blog' pelo link que a imagem deve levar, se for para a pág. inicial, não coloque nenhuma url, mas uma barrinha : /. Troque url da imagem normal pela url da imagem normal, repita a url da imagem normal e e troque url da imagem em estado hover pela url da imagem que deve aparecer quando você passar o mouse.
Essas são as imagens que eu fiz :
Normal Hover
 
Normal Hover



 
Esses foram os fundos que eu usei (o primeiro é transparente) :

Pronto ! E aí, gostaram ? Entendeream ?
Se usar algum tutorial, imagem ou fundo, credite ! 

Um comentário: