Cambiar dinámicamente una imagen con JavaScript

09/Sep/2009 JavaScript , , 7 Comentarios

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.

Vídeos sobre Javascript


7 comentarios en “Cambiar dinámicamente una imagen con JavaScript”

Víctor Cuervo

Osman

Hola mundo….!

Víctor Cuervo

Juanjo Salvador

Buenas!

Basándome en tu código para una práctica de clase (estudio FP Grado Superior Desarrollo de Aplicaciones Web) y en mi experiencia previa en JavaScript, he “mejorado” un poco esto, para crear una galería de imágenes dinámica que permite cambiar la imagen que se muestra con pasar el ratón sonre la miniatura.

El código lo he colgado en Github Gist https://gist.github.com/JuanjoSalvador/56f5c36d432bd48a1738

Víctor Cuervo

Víctor Cuervo

Gracias por la aportación Juanjo Salvador.
Saludos.

Víctor Cuervo

edel

Hola
Estoy intentando adaptar el código para cambiar una imagen pero no me funciona.
El caso es que necesito que al hacer clic en una imagen esta envíe con jquery a un archivo ajax.php dos variables. El archivo php hace una consulta a una base de datos si los datos no existen los introduce, y si están los elimina. Entonces a cada uno de los if, tambien le quiero añadir que cambie la imagen.
No sé si no funciona por estar en una página externa.
Es para la parte de series en mi página http://www.tubeonline.net, que necesito se pueda marcar los capítulos vistos.
Le pido alguna ayuda por favor.
Saludos

Víctor Cuervo

pedro

gracias muy interesante me sirvio mucho es de mucha ayuda gracias saludos desde lima perù

Víctor Cuervo

omar

hola me parece muy bien su pagin

Víctor Cuervo

Polilla

Hola que tal soy nueva en esto del JS no se mucho pero entiendo bien el lenguaje tengo una pregunta ya uqe estoy haciendo un proyecto con esta aplicación.. yo quiero hacer una lista de enlaces y que en cada enlace me vaya enseñando una foto diferente o correspondiente a ese tema en particular.. como quedaria el código para eso??

De ante mano agradeceria su ayuda.. quiero hacer un ejemplo como el de esta página http://www.conaculta.gob.mx/

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*