Buenas!!! te lo explicaré con un ejemplo usando Javascript
:
Primero, tenemos que guardar en una variable la imagen:
Código:
var imagen = document.getElementById('imagen');
Luego debemos elegir el elemento que va a disparar el evento (en este caso un botón):
Código:
<input type="button" value="Pasa el ratón por encima!" onmouseout="cambiarImagen()" onmouseover="restaurar()" />
Y después cambiamos el 'src' de la imagen:
Código:
function cambiarImagen(){
imagen.src = "http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg";
}
Te dejo un ejemplo completo:
Código:
<html lang="en">
<head>
<script type="text/javascript">
function iniciar(){
var imagen = document.getElementById('imagen');
}
function restaurar(){
imagen.src = "http://3.bp.blogspot.com/-MGedRBgtcQY/VWZTWWKEfGI/AAAAAAAAABQ/um8W-TDSTnw/s1600/www.BancodeImagenesGratuitas.com-Fantasticas-20.jpg";
}
function cambiarImagen(){
imagen.src = "http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg";
}
</script>
<style type="text/css">
img {
width: 40%;
height: 200px;
}
</style>
</head>
<body onload="iniciar()">
<input type="button" value="Pasa el ratón por encima!" onmouseout="cambiarImagen()" onmouseover="restaurar()" />
<div ><img id="imagen" src="http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg" alt=""
></div>
</body>
</html>