Pular para o conteúdo principal

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

O evento usado para isso é o onMouseOver do JavaScript. Com ele, quando o usuário passa o mouse sobre um elemento, uma função é acionada. Veja no exemplo:

No trecho acima, o que acontece é que quando o usuário passa o mouse sobre a imagem, o atributo src dela é alterado para um novo endereço. Esse mesmo processo poderia ser utilizado para alterar a cor de fundo de uma div, por exemplo:

Você deve ter percebido que ao passar retirar o mouse da imagem, ela continua com sua versão modificada, isso porque nós não definimos o que acontece quando o usuário tirar o mouse do elemento. Para isso, usaremos o evento onMouseOut:

Atualização 01/09/2016: existe um jeito ainda mais rápido e fácil de fazer com que a imagem mude ao passar o mouse utilizando CSS. Basta incluir na sua tag style o seguinde código, modificando as partes destacadas:

elemento:hover {background: url(http://dominio.com/novaImagem.jpg);}

Postagens mais visitadas deste blog

E-Referer - De onde vem seus visitantes?

O site E-Referer oferece uma ferramenta gratuita que mostra a origem dos visitantes do seu blog e a quantidade de visitas que lhe enviou.