Changer l'image via la fonction onclick()

Question

Je souhaite changer une image en une autre lorsque je clique sur l'objet. Les codes sont empilés dans l'ordre suivant :

<li><img><du texte></img></li>
<li><img><du texte></img></li>
<li><img><du texte></img></li>
<li><img><du texte></img></li>
<li><img><du texte></img></li>

Ce que je veux, c'est que lorsque je clique sur

, l'image se transforme en une version couleur de l'image, qui est une autre image. Maintenant, je sais que je peux le faire en utilisant JQuery/JS. Mais je ne veux pas ajouter beaucoup de code JS pour réaliser une fonction aussi simple.

Existe-t-il un moyen plus simple de procéder ? Des méthodes comme la classe pseudo-sélecteur.active

Je n’y pense pas.

Answer 1

Pour modifier l'événement onclick d'une image à l'aide de JavaScript, vous devez avoir une image avec un identifiant :

<p>
    <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>

Ensuite, lorsque l'on clique sur l'image, vous pouvez appeler la fonction JavaScript :

function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
    } else {
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}

Ce code définira l'image sur maximiser.png lorsque le img.src actuel est défini sur minimiser.png et vice versa. Pour plus de détails, veuillez visiter : Modifier le lien d'événement onclick d'une image à l'aide de JavaScript