Cambiar una imagen con jquery es un recurso muy sencillo que puede hacer más dinámico el diseño de vuestra web.
Supongamos que tenéis un elemento img con id "mi_imagen", cuyo atributo src apunta a imagen_1.png, y queréis que la imagen cambie por imagen_2.png:
<img id="mi_imagen" src="imagen_1.png"/>Es importante que en elemento img incluyáis un id, es lo que utilizamos para indicar a qué elemento de la página vamos a modificarle su atributo src:
$('#mi_imagen').attr('src','imagen_2.png');La función attr indica que vamos a modificar el valor de algún atributo del elemento, en el primer parámetro indicamos qué atributo, en este caso es 'src' y en el segundo parámetro indicamos su nuevo valor 'imagen_2.png'.
Con esto ya está!!
Así por ejemplo si queréis que al pulsar sobre la imágen, cambie a la segunda imágen podéis hacer:
<img id="mi_imagen" src="imagen_1.png" onclick="$('#mi_imagen').attr('src','imagen_2.png');">Un saludo a todos!
Excelente parcero , Gracias !!
ResponderEliminarGenial. Muchas gracias, amigo.
ResponderEliminarGenial. Muchas gracias, amigo.
ResponderEliminarDe nada! Me alegra que os sirva de ayuda!
EliminarMuy bien, y que pasa si quiero regresar a la primera imagen al hace clic otra vez
ResponderEliminarHola Emmanuel,
ResponderEliminarEs un ejemplo para probar la funcionalidad. Realmente en el onclick deberías llamar a una función javascript, que crearas para ir a la imagen siguiente. Por ejemplo, onclick="nextImage();" y esta función gestionaría que imagen cargar en el src.
Espero que mi respuesta te sea útil.
Un saludo!
Una duda si las imagenes estan dentro de una tabla funciona igual?
ResponderEliminarBuenas Arley!
EliminarSí funcionará igual, siempre y cuando, la imagen tenga el id!
Un saludo!
Gracias amigo
ResponderEliminar