Passar mouse em cima de uma img e aparecer outra

[Lucas Moraes 0]

Bom pessoal, será que alguem saberia fazer um codigo, que quando passa o mouse em cima de uma img aparece outra, ai qndo tira o mouse ela volta normal?

 

Exemplo:

Assim é ela normal

 

Passa o mouse fica assim:

 

Bom esse é meu primeiro post então espero estar postando certo =D

 

Muito Obrigado a todos!

[Lucas Guima 164]

Esse efeito se chama rollover.

[Wanderson Valerio 102]

Sim, se chama rollover. Esse ai foi desenvolvido com jQuery, você deve olhar o código-fonte dessa página, para conseguir o efeito, o que você pode fazer é buscar esse efeito na internet, ou pegar ele diretamente desse site que você mostrou.

[jotaNonato 0]

<script type="text/javascript">
 $(document).ready(function() {
  $("#home-icon2").hover(function() {
   o que você quer fazer quando o mouse entrar aqui
  },function() {
   o que você quer quando o mouse sair
});

 

Vale lembrar que tem que adicionar o jquery a sua página;

pode optar também por mouseenter e mouseleave.

[Lucas Moraes 0]

Eu tentei usar o rollover, mais não deu muito certo... olha como fica:

 

Normal:

 

Passa o mouse em cima:

 

Quando passa o mouse em cima, o site fica .. vamos dizer que desalinha tudo... como mostra na imagem :/

 

E sobre pegar o código do site do exemplo, eu não consegui.. D:

 

Se alguém souber como pega o código de la, o site é:

http://www.habibs.com.br/produtos/

 

E sobre esse código que o jotaNonato não entendi muito bem...

 

Bom gente, agradeço a todos que me ajudaro, mais ainda não consegui =/

[William Bruno 1501]

trabalhe com position absolute, dessa forma você não irá desalinhar o restante do site.

 

agora o seu problema vai ser resolvido puramente com css.

[Lucas Moraes 0]

Poderia me mostar um exemplo?

 

O codigo que estou usando:

 

<table width="684" height="62" border="0">
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/1.png" alt="" width="121" height="129" /></a></td>
 <td><a href="#" title="Saiba Mais..."><img src="images/comidas/2.png" alt="" width="121" height="129" /></a></td>
 <td><a href="#" title="Saiba Mais..."><img src="images/comidas/3.png" alt="" width="121" height="129" /></a></td>
 </tr>
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/4.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/5.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/6.png" alt="" width="121" height="129" /></a></td>
 </tr>
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/7.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/8.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/9.png" alt="" width="121" height="129" /></a></td>
 </tr>  
</table>

[Ismaeldm 5]

Poderia me mostar um exemplo?

 

O codigo que estou usando:

 

Poste o código completo, o position:absolute; deve ser adicionado no css, na imagem que será carregada com o hover

[Lucas Moraes 0]

Eu não tenho o css, se tive como alguem me faze esse codigo ai pra encaixar na minha tabela.

[Ismaeldm 5]

Eu não tenho o css, se tive como alguem me faze esse codigo ai pra encaixar na minha tabela.

hum...

neste caso, tente fazer o seguinte...

 

substitua isto:

<table width="684" height="62" border="0">

por isto:

<table width="684" height="62" border="0" style="position:absolute;">

[Lucas Moraes 0]

Não deu.. ainda fica indo pro lado a tabela toda, será que não tem jeito de criar uma tabela assim, só que em div slá?

 

<table width="684" height="62" border="0">
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/1.png" alt="" width="121" height="129" /></a></td>
 <td><a href="#" title="Saiba Mais..."><img src="images/comidas/2.png" alt="" width="121" height="129" /></a></td>
 <td><a href="#" title="Saiba Mais..."><img src="images/comidas/3.png" alt="" width="121" height="129" /></a></td>
 </tr>
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/4.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/5.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/6.png" alt="" width="121" height="129" /></a></td>
 </tr>
 <tr>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/7.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/8.png" alt="" width="121" height="129" /></a></td>
<td><a href="#" title="Saiba Mais..."><img src="images/comidas/9.png" alt="" width="121" height="129" /></a></td>
 </tr>  
</table>

 

Pra ficar assim:

 

[Ismaeldm 5]

Não deu.. ainda fica indo pro lado a tabela toda, será que não tem jeito de criar uma tabela assim, só que em div slá?

 

Cara, é que parece que você ta tentando fazer uma "postagem" ou algo do tipo... Porque pra fazer legal mesmo precisaria criar um CSS e arrumar todo o HTML pra ficar adaptável ao efeito do JavaScript

Tente falar comigo por msn: ismael.dullius.machado@hotmail.com

Aí a gente ve o que pode ser feito

[Lucas Moraes 0]

Te add já.