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

**Lucas Gauthier** · 28/01/2020, 12h49

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**joel.drigo** · 28/01/2020, 13h30

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**javatwister** · 28/01/2020, 14h09

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Lucas Gauthier** · 28/01/2020, 17h20

@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).

**Lucas Gauthier** · 28/01/2020, 17h30

@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

Invité · 28/01/2020, 17h54

Bonjour,

Supprime le lien <a>, qui ne sert effectivement à rien.

**joel.drigo** · 28/01/2020, 17h56

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**joel.drigo** · 28/01/2020, 18h02

Envoyé par jreaux62

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

**javatwister** · 28/01/2020, 18h08

Il me semblait avoir été clair dans ma première réponse sur les 3 problèmes de ton code. Comme quoi...

Invité · 28/01/2020, 18h19

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

Cela dit, ce lien est toujours inutile ici !

**javatwister** · 28/01/2020, 18h27

Envoyé par joel.drigo

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

Ah oui, de fait!

Ce n'est pas le lien qui est cliqué mais l'image. D'où la conclusion initiale...

**joel.drigo** · 28/01/2020, 18h34

Envoyé par javatwister

Ah oui, de fait!

Ce n'est pas le lien qui est cliqué mais l'image. D'où la conclusion initiale...

Oui enfin comme ça aussi :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**javatwister** · 28/01/2020, 18h49

J'avais oublié que j'utilisais ce truc dans les années 80

Mais attention: une page est ajoutée à l'historique et tu te retrouves inutilement avec une adresse en "#";

**Lucas Gauthier** · 28/01/2020, 19h31

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 !

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

JavaScript

Discussions similaires

Partager

Partager