Artículos
Javascript

Cambiar dinámicamente una imagen con JavaScript

09/Sep/2009

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.

Código Fuente

Descárgate el código fuente de Cambiar dinámicamente una imagen con JavaScript
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
12 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios