(Resolvido) Trocar imagem ao passar o mouse por cima

[juninhodagavioes]

Preciso de uma ajuda, sou novato em javascript, e queria saber qual é o código para que, ao passar o mouse por cima de uma imagem, essa mesma imagem seja trocada por outra?

Valeu quem ajudar, falou!

[Raphael Machado]

Para fazer isso, crie uma classe para o botão:

<style type="text/css">
<!--
.botao a:hover { 
background: #666 url('botao_hover.gif') no-repeat 
center center;
color:#999;
               }
-->
</style>

E no botão faça assim:

<p class="botao"><a href="#" title="Meu Link">Botão</a></p>

falou!

[Mestre SAM]

você pode fazer da forma como o raphael falou, usando css.

ou direto na imagem com javascript tb funciona.

algo como:

<img src="imagem1.jpg" onmouseover="this.src='imagem2.jpg';" onmouseout="this.src='imagem1.jpg'">

assim quando passar o mouse por cima da imagem, ela muda para outra imagem,

quando tirar o mouse ela volta a imagem anterior.

sucesso ai.

[juninhodagavioes]

Não funcionou Mestre Sam :( Tem que por o link com aspas ou sem?

[Jonathan Queiroz]

Faça do jeito que está ali, com as aspas !

[juninhodagavioes]

Ainda não da cert, olha o codigo:

<img src="http://img291.imageshack.us/img291/5449/gamesim3.jpg" onmouseover="this.src='http://img155.imageshack.us/img155/4066/gamesseleoeu5.jpg';" onmouseout="this.src='http://img291.imageshack.us/img291/5449/gamesim3.jpg'">

[Jonathan Queiroz]

Em que navegador você testou ??

Era pra funcionar, mas de qualquer forma tente fazer assim:

<img src="http://img291.imageshack.us/img291/5449/gamesim3.jpg" onmouseover="document.getElementById(this.id).src='http://img155.imageshack.us/img155/4066/gamesseleoeu5.jpg';" onmouseout="document.getElementById(this.id).src='http://img291.imageshack.us/img291/5449/gamesim3.jpg'">

[juninhodagavioes]

Uso o Firefox, mas mesmo assim não deu:(

[Jonathan Queiroz]

Erro mínimo !

Fui ver agora !

Você tem que dar um id ao objeto para funcionar...

Ficaria assim:

<img id="imagem1" src="http://img291.imageshack.us/img291/5449/gamesim3.jpg" onmouseover="document.getElementById(this.id).src='http://img155.imageshack.us/img155/4066/gamesseleoeu5.jpg';" onmouseout="document.getElementById(this.id).src='http://img291.imageshack.us/img291/5449/gamesim3.jpg'">

[Mestre SAM]

estranho cara,

eu uso exatamente assim como eu mostrei, sem id. e funciona!

a unica diferenca é q num codigo real eu uso a palavra javascript antes.

onmouseover="java script:this.src='imagem.jpg';"

de resto, tudo igual, e testei no IE, no FF e no Chrome.

sem problemas!

[juninhodagavioes]

Ah valeu pessoal, agora deu!

Editado Dezembro 14, 2008 por juninhodagavioes