Pregunta 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 el icono de la imagen cambie a <img src="imgx_off.gif"> dónde x representa la imagen número 1 o 2.

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


569
2018-02-16 19:23


origen


Respuestas:


Puedes usar jQuery's attr () función. Por ejemplo, si la etiqueta img tiene un atributo id de 'mi_imagen':

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

Luego puede cambiar el src en jQuery por:

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

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

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

Para girar la imagen, puedes hacer esto:

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

1359
2018-02-16 19:27



Uno de los errores comunes que las personas cometen cuando cambian la fuente de la imagen no está esperando que la carga de la imagen haga acciones posteriores como el tamaño de la imagen que está madurando, etc. Deberás 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


70
2018-03-22 16:35



Para más información. Intento establecer 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, también cambia la ruta de la imagen y no funciona.

He buscado resolver este problema pero no encontré nada.

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

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


19
2017-07-20 10:01



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

También le mostraré cómo limpiar la página después de que el documento esté listo, de modo que solo se muestre inicialmente 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();

    });
});

El desglose

  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 mayor funcionalidad ... por ejemplo mostrar el enlace de trabajo debajo de cada imagen)

        var $images = $("#d1 > .c1 > a").clone();  ;
    
  2. Verifique cuántas imágenes hay en el HTML y cree una variable para rastrear qué imagen se está mostrando:

    var $length = $images.length;
    var $imgShow = 0;
    
  3. Modifique el HTML del documento para que solamente la primera imagen se muestra. Eliminar todas las otras imágenes.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
    
  4. Enlace una función para manejar 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 mantendrá el ciclo de índice resultante de 0 a length-1, que son los índices de $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.

    Adicionalmente, .attr() se usa para obtener y configurar el atributo "src" de las imágenes. Para elegir elementos de entre los $images objeto, configuré $images como el jQuery contextusando el formulario $(selector, context). Entonces yo uso .eq() para elegir solo el elemento con el índice específico que me interesa


Ejemplo jsFiddle con 3 imágenes


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

Y aquí está cómo incorporar los hrefs de las etiquetas de anclaje alrededor de las imágenes:
Ejemplo jsFiddle


16
2017-09-11 23:27



SI no solo hay jQuery u otros marcos de destrucción de recursos (muchos kb se descargan 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>

12
2017-09-13 21:44



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 múltiples estados para la fuente de la imagen.


8
2017-09-28 00:44



Tuve el mismo problema al tratar de llamar al botón de re captcha. Después de algunas búsquedas, ahora la siguiente función 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 utiliza para representar una nueva imagen de captcha y se puede ignorar en su caso. El punto más importante es generar una nueva URL que obligue a FF e IE a reenviar la imagen.


6
2017-07-24 12:57