Changer la source src d'une image en jQuery lors d'un clic de souris ?
jQuery permet d'interagir avec l'internaute qui navigue sur la page, par le biais d'évènements, et de modifier facilement les composants de la page.
La bibliothèque JavaScript jQuery fournit des outils permettant d'interagir avec l'internaute qui navigue sur la page, par le biais d'évènements, et de modifier facilement les composants de la page. Il est donc possible de changer une image au simple clic de la souris (astuce complémentaire à celle-ci: Comment créer en jQuery une image réactive (en rollover) au moment du passage de la souris).
Pour pouvoir la sélectionner facilement, il suffit d'utiliser un identifiant sur la balise img.
<img id=monImage src=img_01.png/>
La méthode attr() permet de modifier l'attribut dont le nom est passé en paramètre. Cette méthode permet donc de changer l'image source d'une balise <img> :
$(#monImage).attr(src, img_02.png);
Pour que la méthode s'exécute au moment du clic de la souris, il faut lui attacher le code sur l'évènement click(). On utilise pour cela la méthode on() :
$('#monImage').on({
'click': function(){
$('#monImage').attr('src','img_02.png');
}
});
Pour changer l'image à chaque clic, il suffit d'ajouter une condition avec un test sur l'image déjà présente :
$('#monImage').on({
'click': function() {
var src = ($(this).attr('src') === 'img_01.png')
? 'img_02.png'
: 'img_01.png';
$(this).attr('src', src);
}
});