Changer l'image via la fonction onclick()
P粉242535777
P粉242535777 2023-08-18 08:53:28
0
1
468
<p>Je souhaite changer une image en une autre lorsque je clique sur l'objet. Les codes sont empilés dans l'ordre suivant : </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Ce que je veux, c'est que lorsque je clique sur <code><li></code>, 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. </p> <p>Existe-t-il un moyen plus simple de procéder ? Des méthodes comme la classe pseudo-sélecteur<code>.active</code> </p> <p>Je n’y pense pas. </p>
P粉242535777
P粉242535777

répondre à tous(1)
P粉111627787

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!