Comment puis-je modifier dynamiquement les sources d'images dans mon application Web à l'aide de jQuery ?

Manipulation des sources d'images avec jQuery

Dans les applications Web, contrôler dynamiquement l'apparence visuelle des éléments est essentiel pour une expérience utilisateur engageante. Un scénario courant est la nécessité d'échanger les sources d'images en fonction des interactions des utilisateurs.

Considérez un scénario dans lequel une page Web comporte deux images :

<div>
<p>Vous souhaitez modifier la source d'image en imgx_off. .gif, où x représente le numéro de l'image (1 ou 2), lorsqu'un utilisateur clique dessus. Cette fonctionnalité permet une représentation visuelle des changements ou des transitions d'état.</p>
<h3 id="Solution-Utilisation-de-la-fonction-attr-de-jQuery">Solution Utilisation de la fonction attr() de jQuery</h3>
<p>La fonction attr() de jQuery offre un moyen polyvalent de manipuler les attributs HTML de manière dynamique. Dans ce cas, cela vous permet de modifier l'attribut src de l'image.</p>
<p>Pour implémenter cette fonctionnalité :</p>
<ol>
<li>Attribuez un identifiant unique à chaque image, tel que img1 et img2. </li>
<li>Utilisez la fonction attr() pour modifier l'attribut src lorsque l'image est cliqué.</li>
</ol>
<pre class="brush:php;toolbar:false">$('#img1').on({
    'click': function(){
        $('#img1').attr('src','img1_off.gif');
    }
});
$('#img2').on({
    'click': function(){
        $('#img2').attr('src','img2_off.gif');
    }
});

Rotation des sources d'images

Pour améliorer davantage la fonctionnalité, vous pouvez implémenter la rotation des images. Cela permet aux images de basculer de manière transparente entre deux états prédéfinis (par exemple, de img1_on à img2_off et vice versa).

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

Ce script vérifie l'attribut src actuel de l'image cliquée et le met à jour avec le source d'image appropriée en fonction de l'état actuel.