Modification de la source d'image à l'aide de jQuery

764

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 veux que l'image src change pour <img src="imgx_off.gif">où xreprésente le numéro d'image 1 ou 2.

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

javascript jquery image user67033
la source
Si vous voulez quelque chose en utilisant jQuery, vous voudrez peut-être examiner le plug-in jQuery Cycle, démo scrollRight (exemple en bas à droite)
TomHastjarjanto
43
jQuery ("# ​​my_image"). attr ("src", "first.jpg")
manish nautiyal
9
Vous devriez vraiment accepter la réponse de jonstjohn :) Le nombre de votes positifs sur la question et la réponse indique que beaucoup de gens se sont heurtés à cela. Cela améliorerait la question d'avoir une réponse acceptée.
Xcelled
4
Jusqu'à la date, c'est-à-dire 19th July, 2016 15:39 PM, le nombre de votes positifs de la question compte 369 et @jonstjohn Répondre le nombre de votes positifs 931 . Mais, une telle mauvaise chance, @OP ne s'est pas connecté après Feb 17 '09 at 2:57. :(Et, @jonstjohn Answer Remain Unmarked .
Nana Partykar
@Xcelled, le seul problème est que la réponse de jonstjohn ne répond pas à la question. C'est un point mineur mais qui mérite d'être souligné. Jetez un oeil à la réponse d'inco car c'est la seule ici qui répond réellement à la question correctement.
David Newcomb

Réponses:

1687

Vous pouvez utiliser la fonction attr () de jQuery . Par exemple, si votre imgbalise a un idattribut 'my_image', vous feriez ceci:

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

Ensuite, vous pouvez changer l' srcimage de votre image avec jQuery comme ceci:

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

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

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

Pour faire pivoter l'image, vous pouvez procéder comme suit:

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

L'une des erreurs les plus courantes que commettent les personnes qui changent la source de l'image n'attend pas que la charge de l'image effectue par la suite des actions telles que la maturation de la taille de l'image, etc. Vous devrez utiliser la .load()méthode jQuery pour effectuer des tâches 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 la modification: https://stackoverflow.com/a/670433/561545

Mohsen
la source
Oui. Cela a finalement fait l'affaire. .destroy () ne va pas assez loin. Nuking tout le html et que init fonctionne à nouveau réellement lors de l'échange d'images de différentes tailles et autres.
Matt J.
notez que la charge ne se déclenchera pas de manière fiable, surtout si l'image est dans le cache. Voir la documentation jQuery.
Twilite
19

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 fonctionne, mais si vous changez 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 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 qu'elle sera utile pour d'autres.

wphonestudio
la source
18

S'il n'y a pas seulement jQuery ou d'autres frameworks de destruction de ressources - plusieurs ko à télécharger à chaque fois par chaque utilisateur juste pour une astuce 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>
inco
la source
Cela me surprend toujours combien de personnes ne peuvent pas lire une question et donner la réponse demandée. Il m'a semblé évident (et vous) que la question cherchait une solution générique, c'est pourquoi le PO a donné 2 exemples. Et pourtant, tout le monde semblait non seulement manquer complètement, mais donner une réponse qui ne répondait même pas à la question. :(
David Newcomb
17

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 HTML (dans votre d1identifiant et c1classe en particulier) ... que vous ayez 2 images ou plus dans votre HTML .

Je vais également vous montrer comment nettoyer la page une fois le document prêt, afin qu'une seule image s'affiche 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 (remarque: vous pouvez également utiliser l'attribut href des liens pour des fonctionnalités supplémentaires ... par exemple afficher le lien de travail sous chaque image ):

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

  2. Vérifiez le nombre d'images dans le code HTML et créez une variable pour suivre l'image affichée:

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

  3. Modifiez le code HTML du document afin que seule la première image soit 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 % $lengthpour faire défiler l'objet jQuery contenant les images. ++$imgShow % $lengthaugmente d'abord notre compteur d'un, puis modifie ce nombre avec le nombre d'images. Cela gardera l'index résultant cyclant de 0à length-1, qui sont les indices de la$images objet. 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.

    En outre, .attr()est utilisé pour obtenir et définir l'attribut "src" des images. Pour choisir des éléments parmi l' $imagesobjet, j'ai défini $imagesle contexte jQuery à l'aide du formulaire $(selector, context). Ensuite, je .eq()choisis juste 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 jsFiddle avec 3 images

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

Peter Ajtai
la source
17

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;
        }
    });
});
Zeeshan
la source
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Derek Brown
Merci Derek gardera cette chose dans mon esprit à partir de la prochaine fois
Zeeshan
14

Vous devez ajouter un 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 () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });
Mr Bitmap
la source
9

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 existe plusieurs états pour la source d'image.

FernandoEscher
la source
5
cette syntaxe n'est pas correcte. la fonction jquery attr () prend 1 ou 2 paramètres. Le premier étant une chaîne avec le nom d'attribut HTML, le second étant la valeur de cet attribut que vous souhaitez définir.
Thiago Silva
7

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 désormais correctement 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 de générer une nouvelle URL qui oblige FF et IE à restituer l'image.

Kayvan Tehrani
la source
7

Changer la source de l'image à l'aide de 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);
        }
    });
Abhijit Poojari
la source
7

Si vous mettez à jour l'image plusieurs fois et qu'elle est mise en cache et ne se met pas à jour, ajoutez une chaîne aléatoire à la fin:

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
kintsukuroi
la source
1
Il est très important, au moins pour moi, d'ajouter la chaîne aléatoire à la fin! Réservoirs!
Marcelo Sader
3

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');  
});
Anyone_ph
la source
3

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

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Raymond Wachaga
la source
1

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');
});
Szél Lajos
la source
-1

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

Le seul moyen possible est d'utiliser Javascript ou toute bibliothèque Javascript comme jQuery .

Logique-

Les images sont à l'intérieur d'un div et il n'y a pas classou idavec cette image.

La logique sera donc de sélectionner les éléments à l'intérieur de l' divendroit où se trouvent les images.

Sélectionnez ensuite tous les éléments images avec boucle et changez l'image src avec Javascript / jQuery .

Exemple de code avec 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>
Développer l'extrait

Abrar Jahin
la source