En este ejemplo vamos a explicar como al pasar sobre un enlace cambie una imagen del documento. Para poder llevar a cabo este ejemplo debemos de tener en cuenta una serie de cosas.
La primera es que el código Javascript que se ejecute para cambiar la imagen empezará a ejecutarse cuando se produzca el evento onMouseOver sobre el enlace. Este evento llamará a una función que podemos llamar cambiar.
No se nos debe de olvidar que cuando el usuario abandone el enlace debemos de volver a poner la imagen original. Para ello debemos de capturar el evento onMouseOut que lanzará otra función que llamaremos volver.
<a href="#" onmouseover="cambiar();" onmouseout="volver();">Al pasar sobre mi cambiará la imagen</a>
Con respecto a las funciones Javascript debemos de tener en cuenta como se llama la imagen del documento. Para ello daremos un identificador a la imagen a través de su parámetro ID.
<img src="mt05.jpg" id="matrix">
Como conocemos el nombre de la imagen valdrá con modificar su parámetro src que indica el origen de la imagen.
function cambiar(){
document.getElementById('matrix').src="mt07.jpg";
}
function volver(){
document.getElementById('matrix').src="mt05.jpg";
}
Cuando entremos en el enlace se cargará una foto y cuando salgamos, otra.
