Comment puis-je modifier dynamiquement les sources d'images avec jQuery on Click ?

Modification des sources d'images avec jQuery

Votre objectif est de modifier dynamiquement les sources d'images dans la structure DOM suivante :

<div>
<p>En cliquant sur chaque image, vous souhaitez modifier sa source en "imgx_off.gif", où "x" correspond soit à "1" ou "2."</p>
<p><strong>Solution : tirer parti de la fonction attr() de jQuery</strong></p>
<p>Oui, il est possible d'accomplir cela sans CSS. La méthode attr() de jQuery vous permet de modifier les attributs des éléments DOM, y compris les URL des sources d'images.</p>
<p>Par exemple, si votre balise d'image possède un attribut id de "my_image", le code suivant fera l'affaire :</p>
<pre class="brush:php;toolbar:false"><img  alt="Comment puis-je modifier dynamiquement les sources d'images avec jQuery on Click ?" >

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

Pour attacher cette action à un événement de clic :

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

Image Rotation

Si vous souhaitez faire pivoter les images, utilisez ce code :

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