Linea de Codigo

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.

<script type="text/javascript">
 
 function cambiar () {
  document.getElementById('matrix').src = "mt07.jpg";
 }
 
 function volver () {
  document.getElementById('matrix').src = "mt05.jpg";
 }
 
</script>

Cuando entremos en el enlace se cargará una foto y cuando salgamos, otra.