Question Changer la source de l'image en utilisant jQuery


Mon DOM ressemble à ceci:

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

Quand quelqu'un clique sur une image, je veux que l'image src change pour <img src="imgx_off.gif"> où x représente le numéro d'image 1 ou 2.

Est-ce possible ou dois-je utiliser CSS pour changer les images?


569
2018-02-16 19:23


origine


Réponses:


Vous pouvez utiliser jQuery attr () fonction. Par exemple, si la balise img possède un attribut "my_image":

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

Ensuite, vous pouvez changer le src dans jQuery par:

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

Pour attacher ceci à un click événement, vous pourriez écrire:

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

Pour faire pivoter l'image, vous pouvez le faire:

$('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



L'une des erreurs courantes que les gens font lorsqu'ils changent de source d'image n'attend pas que le chargement de l'image fasse des actions ultérieures comme la taille de l'image de maturation, etc. Vous devrez utiliser jQuery .load() méthode pour faire des choses après le chargement de l'image.

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

});

Raison de l'édition: https://stackoverflow.com/a/670433/561545


70
2018-03-22 16:35



Pour plus d'informations. J'essaie de définir l'attribut src avec la méthode attr dans jquery pour l'image publicitaire en utilisant la syntaxe par exemple: $("#myid").attr('src', '/images/sample.gif');

Cette solution est utile et cela fonctionne mais si changer de chemin change aussi le chemin pour l'image et ne fonctionne pas.

J'ai cherché à résoudre ce problème mais je n'ai rien trouvé.

La solution consiste à mettre le '\' au début du chemin: $("#myid").attr('src', '\images/sample.gif');

Cette astuce est très utile pour moi et j'espère que c'est utile pour les autres.


19
2017-07-20 10:01



Je vais vous montrer comment changer l'image src, de sorte que lorsque vous cliquez sur une image, elle tourne à travers toutes les images qui sont dans votre code HTML (dans votre d1 id et c1 classe en particulier) ... si vous avez 2 ou plus d'images dans votre HTML.

Je vais également vous montrer comment nettoyer la page après que le document soit prêt, de sorte qu'une seule image soit affichée initialement.

Le code complet

$(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 panne

  1. Créez une copie des liens contenant les images (note: vous pouvez également utiliser l'attribut href des liens pour une fonctionnalité supplémentaire ... par exemple afficher le lien de travail en dessous de chaque image):

        var $images = $("#d1 > .c1 > a").clone();  ;
    
  2. Vérifiez combien d'images étaient dans le code HTML et créez une variable pour suivre quelle image est affichée:

    var $length = $images.length;
    var $imgShow = 0;
    
  3. Modifier le code HTML du document afin que seulement la première image est affichée. Supprimez toutes les autres images.

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
    
  4. Liez une fonction à gérer lorsque vous cliquez sur le lien de l'image.

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

    Le cœur du code ci-dessus utilise ++$imgShow % $length pour parcourir l'objet jQuery contenant les images. ++$imgShow % $length augmente d'abord notre compteur de un, puis modifie ce nombre avec combien d'images il y a. Cela permettra de garder l'index résultant de 0 à length-1, qui sont les indices du $images objet. Cela signifie que ce code fonctionnera avec 2, 3, 5, 10 ou 100 images ... faisant défiler chaque image dans l'ordre et redémarrant à la première image lorsque la dernière image est atteinte.

    Aditionellement, .attr() est utilisé pour obtenir et définir l'attribut "src" des images. Choisir des éléments parmi les $images objet, je mets $images comme le contexte jQueryen utilisant le formulaire $(selector, context). Puis j'utilise .eq() choisir juste l'élément avec l'index spécifique qui m'intéresse.


Exemple de jsFiddle avec 3 images


Vous pouvez également stocker le srcs dans un tableau.
Exemple de jsFiddle avec 3 images

Et voici comment incorporer les hrefs des balises d'ancrage autour des images:
Exemple de jsFiddle


16
2017-09-11 23:27



SI il n'y a pas que jQuery ou d'autres frameworks de destruction de ressources - beaucoup de kb à télécharger à chaque fois par chaque utilisateur pour un truc simple - mais aussi du JavaScript natif (!):

<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';">

Cela peut être écrit général et plus élégant:

<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



Vous pouvez également le faire avec jQuery de cette manière:

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

Vous pouvez avoir une condition s'il y a plusieurs états pour la source d'image.


8
2017-09-28 00:44



J'ai eu le même problème en essayant d'appeler le bouton re captcha. Après quelques recherches, maintenant la fonction ci-dessous fonctionne bien dans presque tous les navigateurs célèbres (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' est utilisé pour rendre une nouvelle image captcha et peut être ignoré dans votre cas. Le point le plus important est la génération d'une nouvelle URL qui oblige FF et IE à rediffuser l'image.


6
2017-07-24 12:57



J'ai la même merveille aujourd'hui, je l'ai fait de cette façon:

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

3
2018-04-04 17:48