Javascript – Trocar Imagem

Um recurso muito utilizado nos sites, é o efeito de troca de imagem. Mais comum nos menus em javascript.

Mas pode ser usado para outros recursos visuais. Vai da imaginação de cada um. Eu por exemplo já vi um site onde havia a troca de imagem para dar efeito de movimento.

Era usada a mesma imagem de fundo mas com um efeito de vento em photoshop. Então onde o mouse passava a imagem trocava, criando o efeito, ficou até legal.

E é muito fácil de fazer. No dreamweaver por exemplo você pode criar esse efeito nos seus menus sem digitar um código javascript sequer. Porém o dreamweaver vai gerar o código javascript, e sinceramente!? Evite!

Quer aplicar o efeito de troca de imagem basta usar os eventos onmouseover e onmouseout, assim:

<img src="image1.jpg" onmouseover="javascript:this.src='image2.jpg'" onmouseout="javascript:this.src='image1.jpg'">

Tão simples que dispensa explicações. No onmouseover, o mouse está sobre a imagem, então exibe a imagem 2, no onmouseout, o mouse não está mais sobre a imagem, então volta pra imagem 1.

Era isso, Sucesso!

Um exemplo do código acima funcionando pode ser visto no site: www.lindaesteticista.com.br. No menu lateral a esquerda da página, veja que as fontes estão na vertical, como não dá para escrever assim em html eu precisei usar imagens, aproveitei para aplicar o efeito de troca. Confira!