web-dev-qa-db-fra.com

Changer la source de l'image avec 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>

Lorsque quelqu'un clique sur une image, je souhaite que l'image src devienne <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?

javascriptjqueryimage
679
user67033

Vous pouvez utiliser la fonction attr () de jQuery. Par exemple, si votre balise img a un attribut id de 'mon_image', procédez comme suit:

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

Ensuite, vous pouvez changer la src de votre image avec jQuery comme ceci:

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

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

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

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

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

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

Cette solution est utile et fonctionne, mais si vous modifiez le chemin, changez également le chemin de l'image et ne fonctionne pas.

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

La solution met 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
wphonestudio

Je vais vous montrer comment changer l'image src, de sorte que lorsque vous cliquez sur une image, celle-ci pivote sur toutes les images figurant dans votre code HTML (dans votre d1 id et c1 class. spécifiquement) ... si vous avez 2 ou plusieurs images dans votre code HTML.

Je vais également vous montrer comment nettoyer la page une fois le document prêt, afin qu'une seule image soit affichée au départ.

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 ventilation

  1. Créez une copie des liens contenant les images (remarque: vous pouvez également utiliser l'attribut href des liens pour ajouter des fonctionnalités ... par exemple affiche le lien de travail ci-dessous chaque image):

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

  2. Vérifiez le nombre d'images contenues dans le code HTML et créez une variable pour déterminer quelle image est affichée:

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

  3. Modifiez le code HTML du document de sorte que uniquement la première image soit affichée. Supprimer toutes les autres images.

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

  4. Lier une fonction à manipuler lorsque l'utilisateur clique 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 faire défiler 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. Ceci maintiendra l'index résultant cyclant de 0 à length-1, qui sont les index de l'objet $images. Cela signifie que ce code fonctionnera avec 2, 3, 5, 10 ou 100 images ... en parcourant chaque image dans l'ordre et en redémarrant à la première image lorsque la dernière image est atteinte.

    De plus, .attr() est utilisé pour obtenir et définir l'attribut "src" des images. Pour choisir des éléments parmi l’objet $images, je règle $images comme contexte jQuery en utilisant la forme $(selector, context). Ensuite, j'utilise .eq() pour sélectionner uniquement l'élément avec l'index spécifique qui m'intéresse.

exemple jsFiddle avec 3 images


Vous pouvez également stocker les srcs dans un tableau.
exemple avec jsFiddle avec 3 images

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

17
Peter Ajtai

SI il n’ya pas que jQuery ou d’autres frameworks destructeurs de ressources - beaucoup de ko à télécharger à chaque fois par chaque utilisateur pour une simple astuce - 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 en 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>
17
inco

J'espère que cela peut fonctionner

<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;
        }
    });
});
15
Zeeshan

Vous pouvez également faire cela avec jQuery de cette façon:

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

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

9
FernandoEscher

J'ai eu le même problème en essayant d'appeler le bouton re captcha. Après quelques recherches, la fonction ci-dessous fonctionne maintenant dans la plupart des 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 de générer une nouvelle URL qui oblige FF et IE à restituer l'image.

7
Kayvan Tehrani

Changer la source de l'image avec jQuery click()

élément:

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

code:

    $(".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);
        }
    });
6
Abhijit Poojari

Vous devriez ajouter l'attribut id à votre balise d'image, comme ceci:

<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>

alors vous pouvez utiliser ce code pour changer la source des images:

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

C'est un moyen garanti de le faire en vanille (ou simplement pur) JavaScript:

var picurl = 'pictures/Apple.png';
document.getElementById("image_id").src=picurl;
3
Raymond Wachaga

J'ai le même émerveillement 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
Anyone_ph

Juste un ajout, pour le rendre encore plus petit:

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

Il n'y a aucun moyen de changer la source de l'image avec CSS.

La seule façon possible est d'utiliser Javascript ou n'importe quelle bibliothèque Javascript comme jQuery .

Logique-

Les images sont à l'intérieur d'une div et il n'y a pas de class ou id avec cette image.

Donc, la logique sera sélectionner les éléments à l'intérieur de la div où les images sont situées.

Sélectionnez ensuite tous les éléments d’image avec boucle et modifiez l’image src avec Javascript / jQuery .

Exemple de code avec une sortie de démonstration-

$(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>
0
Abrar Jahin