Passar mouse em cima de uma img e aparecer outra

Esse efeito se chama rollover.

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.

<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.

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

Normal:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/xEEN8.png&key=9eec106c9de7cf6612392d0e15c7a9413a496a28ce837b624f2b17c8b03acb9f" alt="xEEN8.png" />

Passa o mouse em cima:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/bQzMz.png&key=566e3b2b523752750386993073bbd72e2539a730ca04c31c73dffe9cf245b083" alt="bQzMz.png" />

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 =/

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.

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>

>
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

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

>
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;">

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/xEEN8.png&key=9eec106c9de7cf6612392d0e15c7a9413a496a28ce837b624f2b17c8b03acb9f" alt="xEEN8.png" />

>
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

Te add já.