Remplacer une image par une autre image (et vice-versa)

Version imprimable

28/01/2020, 12h49
Lucas Gauthier

Remplacer une image par une autre image (et vice-versa)
Bonjour, je développe un petit site et je coince actuellement à un endroit où j'ai besoin du JavaScript. Je n'y connaît rien en JavaScript et bloque ici :

J'ai placé un lien image et j'aimerai que lorsqu'on clique dessus, cette image soit remplacée par une autre image; et que lorsqu'on reclique dessus, la première image revienne.

Exemple plus compréhensible : image1 -> clique -> image2 -> clique -> image1 et qu'on puisse faire ça autant de fois qu'on veut !

J'ai suivis le conseil de l'un des nombreux topics que j'ai consulté, et ça marcher pas :

Code:

<a href="#"><img src="icone_menu.png" onClick="AfficherMasquer(); changeimg(this)"/></a>
Code:

1 2 3 4 function changeimg(monimage) { monimage.src = (monimage.src=="icone_menu.png" ) ? "icone_menu_change.png" : "icone_menu.png"; }
Merci d'avance pour l'aide ! :lol:

Salut,

La fonction AfficherMasquer() existe ? Elle fonctionne sans erreur ? Parce que si elle n'existe pas ou fait une erreur, ça arrêtera l'exécution du onClick sans appeler la fonction changeimg().

Le reste doit fonctionner. Essaye déjà comme ça :
Code:

1 2 3 4 5 6 7 <a href="#"><img src="icone_menu.png" onClick="changeimg(this);"/></a> <script type="text/javascript"> function changeimg(monimage) { monimage.src = monimage.src=="icone_menu.png" ? "icone_menu_change.png" : "icone_menu.png"; } </script>
PS je passe le relai au forum JavaScript. Java et JavaScript sont deux langages différents sans aucun rapport (à quelques détails de syntaxe commune près).

28/01/2020, 14h09
javatwister
Salut,

1) L'action sur un lien n'est pas anodine; si tu veux stopper le changement d'adresse, return false ou preventDefault() est nécessaire;

2) En fait, ton lien est inutile puisque tu ne vas nulle part avec ton "click";
Par exemple, affecte un style "cursor:pointer" à ton image pour créer un effet de lien.

3) Pense que l'adresse de l'image est absolue, même si tu la déclares comme relative;
Code:

1 2 3 <div> <img style="cursor:pointer" alt="image" src="icone_menu.png" id="im" /> </div>
Code:

1 2 3 document.images['im'].addEventListener("click",function(){ this.src= this.src.search("change")!=-1 ? "icone_menu.png" : "icone_menu_change.png"; },false)
28/01/2020, 17h20
Lucas Gauthier

@joel.drigo

Je confirme que la fonction AfficherMasquer marche correctement et que le problème est lié à la fonction changeimg, même seule.

PS je passe le relai au forum JavaScript. Java et JavaScript sont deux langages différents sans aucun rapport (à quelques détails de syntaxe commune près).
28/01/2020, 17h30
Lucas Gauthier

Là n'est pas le problème, je veux simplement réussir à changer d'image au clique. Et j'ai testé avec votre ver

@javatwister

Là n'est pas le problème, je veux simplement réussir à changer d'image au clique. Et j'ai testé avec votre version et ça ne fonctionne pas
28/01/2020, 17h54
Invité

Bonjour,

Supprime le lien <a>, qui ne sert effectivement à rien.
28/01/2020, 17h56
joel.drigo
Citation:

Envoyé par Lucas Gauthier

@joel.drigo

Je confirme que la fonction AfficherMasquer marche correctement et que le problème est lié à la fonction changeimg, même seule.

Ah, oui le problème vient, comme l'a dit @JavaTwister, des chemins qui sont relatifs et non absolus.

Essaye comme ça :
Code:

1 2 3 function changeImg(imageElement) { imageElement.src = imageElement.getAttribute('src')=="icone_menu.png"?"icone_menu_change.png" : "icone_menu.png"; }

Citation:

Envoyé par jreaux62

Code:

<a href="#">...</a>

~~Quand on clique sur tel lien <a>, la page est ré-affichée (rechargée).~~

Vraiment ? Avec un href comme celui-là, juste vers une ancre ? Pourtant si je fais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html > <body onload="console.log('load');"> <a href="#"><img src="suricate.jpg" onClick="changeImg(this);"/></a> <script type="text/javascript"> const image1="suricate.jpg"; const image2="rouge.jpg"; function changeImg(imageElement) { imageElement.src = imageElement.getAttribute('src')==image1?image2:image1; } </script> </body> </html>
Je ne vois "load" s'afficher qu'une fois (et mon image change bien à chaque clic).

28/01/2020, 18h08
javatwister

Il me semblait avoir été clair dans ma première réponse sur les 3 problèmes de ton code. Comme quoi...
28/01/2020, 18h19
Invité

@joel.drigo
Tu as raison.
J'ai édité mon message entre-temps... (et supprimé ma fausse affirmation) :aie:

Cela dit, ce lien est toujours inutile ici !
28/01/2020, 18h27
javatwister

Citation:

Envoyé par joel.drigo

Vraiment ? Avec un href comme celui-là, juste vers une ancre ?

Ah oui, de fait! :D Ce n'est pas le lien qui est cliqué mais l'image. D'où la conclusion initiale... :roll:
28/01/2020, 18h34
joel.drigo
Citation:

Envoyé par javatwister

Ah oui, de fait! :D Ce n'est pas le lien qui est cliqué mais l'image. D'où la conclusion initiale... :roll:

Oui enfin comme ça aussi :
Code:

1 2 3 4 5 6 <!DOCTYPE html> <html > <body onload="console.log('load');"> <a href="#" onclick="console.log('click');">toto</a> </body> </html>
J'ai une fois "load" et n fois "click".

Donc ce n'est pas le souci d'avoir ce "a". Qu'il serve ou pas est un autre problème...
28/01/2020, 18h49
javatwister

J'avais oublié que j'utilisais ce truc dans les années 80 :lol:
Mais attention: une page est ajoutée à l'historique et tu te retrouves inutilement avec une adresse en "#";
28/01/2020, 19h31
Lucas Gauthier

Merci beaucoup de vos réponses, j'en avais mal compris et le remplacement d'image marche parfaitement, et j'ai supprimé le lien inutile, merci beaucoup !