Imagem muda ao passar o mouse.

 

Hei people, tudo bem com vocês? Hoje eu vou postar o primeiro Tutorial do blog, e é bem simples, eu vou ensinar para vocês como que faz com que a imagem mude ao passar o mouse, é simples, e fica com um efeito bem legal, por exemplo, no meu menu, eu usei esse código

Estado normal

Quando passa o mouse

 

Vamos lá?

Bom primeiro, você tem que ter as duas imagens que você quer que tenha esse efeito, uma para ficar no estado normal, e a outro para quando passa o mouse.

Eu vou dar como exemplo, duas imagens que eu usei ali no menu:

Agora vamos ao código

<imgsrc="ENDERECO_DA_IMAGEM_NORMAL"onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />

Em vermelho: Você deve colocar o url, da primeira imagem, que será carregada com a página, e a mesma voltara ao normal quando o mouse sair de cima dela.

Em verde: Você deve colocar o url da segunda imagem, que aparecerá quando o mouse passar sobre ela.

Para você usar esse código vé e, Disign - Elementos da Página - Adicionar Gadget - e adiciona o HTML/JavaScript

ai é só você colocar o código fazer as alterações necessárias e pronto.

O resultado é esse:

Espero que tenham gostado.
Abraçoes, até a próxima