JQuery Cambiar Imagen asignada

jquery

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Cambiar Imagen</title>
    <script src="jquery.js"></script>
</head>
<body>
    <img src="imagen1.png" alt="" id="imagen"/>
    <button id="b">Cambiar</button>
    <script>
    $(document).ready(function () {
        $("#b").click(function () {
            $("#imagen").attr('src', 'imagen2.png');
        })
    })
    </script>
</body>
</html>

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 este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

2 comentarios

    • byspel Contestar

      Puedes hacer el mismo proceso, validando ya sea con una variable o con la imagen que has cargado, o con un atributo ID.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *