Cambiar la fuente de la imagen usando jQuery

Mi DOM se ve así:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Cuando alguien hace clic en una imagen, quiero que la imagen src cambie a <img src="imgx_off.gif"> donde x representa la imagen número 1 o 2.

¿Es esto posible o tengo que usar CSS para cambiar las imágenes?

preguntado el 16 de febrero de 09 a las 17:02

Si desea algo con jQuery, es posible que desee mirar en el Complemento jQuery Cycle, demo scrollRight (ejemplo de abajo a la derecha) -

jQuery ("# ​​my_image"). attr ("src", "first.jpg") -

Realmente debería aceptar la respuesta de jonstjohn :) El número de votos positivos tanto en la pregunta como en la respuesta indica que mucha gente se ha encontrado con esto. Mejoraría la pregunta para tener una respuesta aceptada. -

Hasta la fecha, es decir 19th July, 2016 15:39 PM, Pregunta recuento de votos a favor 369 Y @jonstjohn responde el recuento de votos positivos 931. Pero, qué mala suerte, @OP no inició sesión después Feb 17 '09 at 2:57. :( Y, @jonstjohn Responde Permanecer No notificado. -

@Xcelled, el único problema es que la respuesta de jonstjohn no responde a la pregunta. Es un punto menor, pero vale la pena destacarlo. Eche un vistazo a la respuesta de inco, ya que es la única aquí que realmente responde la pregunta correctamente. -

17 Respuestas

Puedes usar jQuery's attr () función. Por ejemplo, si tu img la etiqueta tiene un id atributo de 'my_image', harías esto:

<img id="my_image" src="first.jpg"/>

Entonces puedes cambiar el src de su imagen con jQuery así:

$("#my_image").attr("src","second.jpg");

Para adjuntar esto a un click evento, podrías escribir:

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

Para rotar la imagen, puede hacer esto:

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

Respondido el 25 de Septiembre de 18 a las 20:09

Uno de los errores comunes que comete la gente cuando cambia la fuente de la imagen es no esperar a que la imagen se cargue para realizar acciones posteriores como madurar el tamaño de la imagen, etc. Deberá usar jQuery .load() método para hacer cosas después de la carga de la imagen.

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

Razón de la edición: https://stackoverflow.com/a/670433/561545

contestado el 23 de mayo de 17 a las 13:05

Si. Esto finalmente funcionó. .destroy () no va lo suficientemente lejos. Nuking todo el html y luego init nuevamente realmente funciona cuando se intercambian imágenes de varios tamaños y demás. - matt j.

tenga en cuenta que la carga no se activará de forma fiable, especialmente si la imagen está en la caché. Consulte la documentación de jQuery. - Crepúsculo

Para más información. Intento configurar el atributo src con el método attr en jquery para la imagen del anuncio usando la sintaxis, por ejemplo: $("#myid").attr('src', '/images/sample.gif');

Esta solución es útil y funciona, pero si cambia la ruta, cambie también la ruta de la imagen y no funciona.

He buscado resolver este problema pero no encontré nada.

La solución es poner '\' al principio de la ruta: $("#myid").attr('src', '\images/sample.gif');

Este truco es muy útil para mí y espero que sea de utilidad para otros.

Respondido el 21 de Septiembre de 16 a las 07:09

En caso de que actualice la imagen varias veces y se EN CACHE y no se actualiza, agregue una cadena aleatoria al final:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

Respondido el 16 de enero de 20 a las 20:01

¡Es muy importante, al menos para mí, agregar la cadena aleatoria al final! ¡Tanques! - marcelo sader

SI no solo hay jQuery u otros marcos de eliminación de recursos, muchos kb para descargar cada vez por cada usuario solo por un simple truco, sino también JavaScript nativo (!):

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

Esto se puede escribir de forma general y más elegante:

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

Respondido el 02 de diciembre de 11 a las 21:12

Siempre me sorprende la cantidad de personas que no pueden leer una pregunta y dar la respuesta solicitada. Me pareció obvio (y a usted) que la pregunta buscaba una solución genérica, por lo que el OP dio 2 ejemplos. Y, sin embargo, todos los demás parecían no solo extrañarlo por completo, sino también dar una respuesta que ni siquiera respondía a la pregunta. :( - David Newcomb

Te mostraré como cambiar la imagen src, de modo que cuando haces clic en una imagen, esta gira a través de todas las imágenes que están en tu HTML (en tu d1 id y c1 clase específicamente) ... si tienes 2 o más imágenes en su HTML.

También le mostraré cómo limpiar la página después de que el documento esté listo, de modo que inicialmente solo se muestre una imagen.

El código completo

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

La caida

  1. Cree una copia de los enlaces que contienen las imágenes (nota: también puede hacer uso del atributo href de los enlaces para una funcionalidad adicional ... por ejemplo mostrar el enlace de trabajo debajo de cada imagen):

        var $images = $("#d1 > .c1 > a").clone();  ;

  2. Verifique cuántas imágenes había en el HTML y cree una variable para rastrear qué imagen se muestra:

    var $length = $images.length;
var $imgShow = 0;

  3. Modifique el HTML del documento para que , solamente se muestra la primera imagen. Elimina todas las demás imágenes.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

  4. Vincular una función para controlar cuando se hace clic en el enlace de la imagen.

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    El corazón del código anterior está usando ++$imgShow % $length para recorrer el objeto jQuery que contiene las imágenes. ++$imgShow % $length primero aumenta nuestro contador en uno, luego modifica ese número con la cantidad de imágenes que hay. Esto evitará que el ciclo del índice resultante 0 a length-1, que son los índices de la $images objeto. Esto significa que este código funcionará con 2, 3, 5, 10 o 100 imágenes ... recorriendo cada imagen en orden y reiniciando en la primera imagen cuando se alcanza la última imagen.

    Además, .attr() se utiliza para obtener y establecer el atributo "src" de las imágenes. Para elegir elementos de entre los $images objeto, puse $images como el contexto de jQuery usando el formulario $(selector, context). Entonces uso .eq() para elegir solo el elemento con el índice específico que me interesa.

Ejemplo de jsFiddle con 3 imágenes


También puede almacenar el srcs en una matriz.
Ejemplo de jsFiddle con 3 imágenes

Y aquí se explica cómo incorporar los hrefs de las etiquetas de anclaje alrededor de las imágenes:
ejemplo de jsFiddle

Respondido el 12 de Septiembre de 10 a las 03:09

Espero que esto pueda funcionar

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

Respondido 28 Oct 18, 09:10

Si bien este fragmento de código puede resolver la pregunta, incluyendo una explicación realmente ayuda a mejorar la calidad de tu publicación. Recuerde que está respondiendo a la pregunta para los lectores en el futuro, y es posible que esas personas no conozcan los motivos de su sugerencia de código. - derek marrón

Gracias Derek mantendré esto en mi mente a partir de la próxima vez. Zeeshan

Debe agregar el atributo id a su etiqueta de imagen, así: 

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

entonces puedes usar este código para cambiar la fuente de las imágenes:

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

respondido 13 nov., 19:12

También puede hacer esto con jQuery de esta manera:

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

Puede tener una condición si hay varios estados para la fuente de la imagen.

Respondido el 16 de junio de 11 a las 20:06

esta sintaxis no es correcta. la función jquery attr () toma 1 o 2 parámetros. El primero es una cadena con el nombre del atributo HTML, el segundo es el valor para ese atributo que desea establecer. - Thiago Silva

Tuve el mismo problema al intentar llamar al botón re captcha. Después de algunas búsquedas, ahora la función siguiente funciona bien en casi todos los navegadores famosos (Chrome, Firefox, IE, Edge, ...):

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' se usa para renderizar una nueva imagen captcha y se puede ignorar en su caso. El punto más importante es generar una nueva URL que obliga a FF e IE a reproducir la imagen.

Respondido 24 Jul 17, 13:07

Cambiar la fuente de la imagen usando jQuery click()

elemento:

    <img class="letstalk btn"  src="images/chatbuble.png" />

código:

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

Respondido 04 Abr '19, 15:04

Hoy tengo la misma maravilla, lo hice de esta manera:

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

Respondido 04 Abr '16, 18:04

Esta es una forma garantizada de hacerlo en Vanilla (o simplemente Pure) JavaScript:

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

respondido 13 nov., 18:10

Solo una adición, para hacerlo aún más pequeño: 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

Respondido 27 Oct 18, 17:10

Corto pero exacto

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );


let pic=[
  "https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif",
  "https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"
];

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

Respondido el 20 de junio de 20 a las 10:06

Hice un codepen con exactamente esta funcionalidad aquí. También te daré un desglose del código aquí.

Codepen

$(function() {

  //Listen for a click on the girl button
  $('#girl-btn').click(function() {

    // When the girl button has been clicked, change the source of the #square image to be the girl PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");
  });

  //Listen for a click on the plane button
  $('#plane-btn').click(function() {

    // When the plane button has been clicked, change the source of the #square image to be the plane PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  });

  //Listen for a click on the fruit button
  $('#fruits-btn').click(function() {

    // When the fruits button has been clicked, change the source of the #square image to be the fruits PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" id="square" />
<div>
  <button id="girl-btn">Girl</button>
  <button id="plane-btn">Plane</button>
  <button id="fruits-btn">Fruits</button>

  <a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a>
</div>

Respondido el 30 de diciembre de 20 a las 15:12

No hay forma de cambiar la fuente de la imagen con CSS.

La única forma posible es usar Javascript o cualquier Javascript biblioteca como jQuery.

Lógica-

Las imágenes están dentro de un div y no hay class or id con esa imagen.

Entonces, la lógica será seleccionar los elementos dentro del div donde se encuentran las imágenes.

Luego seleccione todos los elementos de imágenes con loop y cambie la imagen src con Javascript / jQuery.

Código de ejemplo con salida de demostración

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

Respondido 08 Abr '16, 06:04

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.