jump to navigation

Cambiar dinámicamente una imagen con JavaScript Septiembre 9, 2009

Publicado por lineadecodigo en : JavaScript , trackback

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.

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

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

  1. <script type="text/javascript">
  2.  
  3.  function cambiar () {
  4.   document.getElementById('matrix').src = "mt07.jpg";
  5.  }
  6.  
  7.  function volver () {
  8.   document.getElementById('matrix').src = "mt05.jpg";
  9.  }
  10.  
  11. </script>

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

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre Javascript

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 1657 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , , , , ,

Comentarios»

Todavía no hay comentarios. ¿Quieres ser el primero?




Si tienes dudas sobre Javascript no dudes en visitar el Foro sobre Javascript.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen