Como ya sabemos JQuery nos permite manipular a nuestro antojo todos los elementos del DOM, con el fin de brindarle a nuestros usuarios la mejor experiencia posible al momento de usar nuestros sitios Web y aplicaciones, a continuación veamos como podemos cambiar la imagen establecida de un elemento img, por una nueva mediante JQuery, acción que realizaremos mediante un botón obviamente sin recargar la página. haciendo uso del método attr de JQuery el cual permite modificar un atributo del selector que deseemos pasar veamos:
[cc lang=»javascript»]
< !DOCTYPE html>
[/cc]
Si nos damos cuenta mediante attr hacemos el cambio, pasando el atributo que deseamos modificar en este caso el src que es el que apunta a nuestra imagen y la ubicación o ruta de nuestra nueva imagen, esta acción la he realizado mediante un botón ya ustedes podrán estipular en que momento efectuarla según sus necesidades.
si quiero volver a la imagen original?
Puedes hacer el mismo proceso, validando ya sea con una variable o con la imagen que has cargado, o con un atributo ID.