Un efecto muy llamativo, ¿Cómo hacerlo?

[Pinty]

Ah comprendo, quieres cambiar la imagen que esta dentro del <div>, no la imagen que esta de fondo del <div>. Puedes hacer lo siguiente a ver si esto te funciona. Te comento.

Suponemos que tienes la siguiente imagen dentro de tu div

Código HTML:

<div id="contenido">
<img id="imagen1" alt="imagen" src="miImagen1.jpg" onmouseover="cambiarImagen1();" onmouseout="cambiarImagen2();"/>
</div>
 

Como puedes ver tenemos dos funciones que se corresponden con las acciones onmouseover (cuando pasamos el raton por encima) y onmouseout (cuando quitamos el raton de por encima)
Cada evento hace cosas diferentes asi que usaremos dos funciones javascript diferentes aunque su codigo sea el mismo, veamos.

Código Javascript:

function cambiarImagen1(){
    var imagen = document.getElementById('imagen1');
    imagen.src = 'images/miImagen2.jpg';
}
 

Código Javascript:

function cambiarImagen2(){
    var imagen = document.getElementById('imagen1');
    imagen.src = 'images/miImagen1.jpg';
}
 

Espero que este pequeño ejemplo te sirva de ayuda y no tienes nada que agradecerme
Mucha suerte

Un saludo
Pinty