script if/else pour alternance d'images

Version imprimable

1 pièce(s) jointe(s)

bonjour

j'ai une page html à créer avec une alternance d'images via une structure contitionnelle (script if/else).

je voudrais qu'en cliquant sur l'image https://zupimages.net/up/20/10/qqni.png ce soit l'image https://zupimages.net/up/20/10/gds4.pngqui apparaisse (ce que j'ai fait avec le onclick dans le corps) et inversement et cela à l'infini (ce que j'arrive pas : l'image apparaît en double).

j'ai l'impression de ne pas avancer. je change des choses sans vraiment comprendre.

pourquoi c'est si compliqué alors que ma prof me dit c'est simple? Je ne sais pas ce qui va pas, pourtant je cherche depuis des jours.

est-il possible que quelqu'un m'explique simplement?

merci beaucoup
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html lang="fr"> <head> <title>Projet informatique </title> <script defer> let img = document.getElementById('img'); functionalternanceImage(src) { if(src === 'https://zupimages.net/up/20/10/qqni.png') { src = 'https://zupimages.net/up/20/10/gds4.png'; } else{ src = 'https://zupimages.net/up/20/10/qqni.png'; } img.src = src; } img.addEventListener("click", function() { alternanceImage(this.src); }); </script> </head> <body> <h1>TEXTE</h1> <img src='https://zupimages.net/up/20/10/ow91.jpeg'alt="FL"height="250"width="450"align="right" onmouseover="this.src='https://zupimages.net/up/20/10/bq9z.png';" onmouseout="this.src='https://zupimages.net/up/20/10/ow91.jpeg';"> <img src='https://zupimages.net/up/20/10/qqni.png'alt="LDDG"height="300"width="300"align="left" onclick="this.src='https://zupimages.net/up/20/10/gds4.png';" /> <p align="center"><img src="https://zupimages.net/up/20/10/ju6t.png"width="400"></p> <img id="img"src="https://zupimages.net/up/20/10/qqni.png"/> </body> </html>

22/03/2020, 16h34
Beginner.

Salut,

Placez votre script à la fin du body (juste avant </body>)...

Cela fonctionne pour l'image en bas à gauche, voulez-vous que cela fonctionne aussi pour celle qui est en haut à gauche ?

Ou peut-être qu'il n'est pas censé y a voir deux images ?

1 pièce(s) jointe(s)

bonjour,

comme cela? ça ne change rien.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="fr">
    <head>
		<title>Projet informatique </title>
 
    </head>
 
    <body>	
        <h1>TEXTE</h1>
 
        <img src='https://zupimages.net/up/20/10/ow91.jpeg' alt="FL" height="250" width="450" align="right"
        onmouseover="this.src='https://zupimages.net/up/20/10/bq9z.png';"
	onmouseout="this.src='https://zupimages.net/up/20/10/ow91.jpeg';">
 
        <img src='https://zupimages.net/up/20/10/qqni.png' alt="LDDG" height="300" width="300" align="left"
        onclick="this.src='https://zupimages.net/up/20/10/gds4.png';"
	/>
        <p align="center"><img src="https://zupimages.net/up/20/10/ju6t.png" width="400"></p>
 
<img id="img" src="https://zupimages.net/up/20/10/qqni.png"/> 
<script defer>
let img = document.getElementById('img');
function alternanceImage(src) {
  if(src === 'https://zupimages.net/up/20/10/qqni.png') {
    src = 'https://zupimages.net/up/20/10/gds4.png';
  } else {
    src = 'https://zupimages.net/up/20/10/qqni.png';
  }
  img.src = src;
}
img.addEventListener("click", function() {
  alternanceImage(this.src);
});
</script>
	</body> 
 
</html>

Pièce jointe 548214
je voudrais que l'image barrée disparaisse et que ce soit l'image entourée qui puisse avoir une alternance à l'infini avec un onclick

Ok testez cela :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="fr">
 
<head>
  <title>Projet informatique </title>
 
</head>
 
<body>
  <h1>TEXTE</h1>
 
  <img src='https://zupimages.net/up/20/10/ow91.jpeg' alt="FL" height="250" width="450" align="right"
    onmouseover="this.src='https://zupimages.net/up/20/10/bq9z.png';"
    onmouseout="this.src='https://zupimages.net/up/20/10/ow91.jpeg';">
 
  <img id="img" src='https://zupimages.net/up/20/10/qqni.png' alt="LDDG" height="300" width="300" align="left" />
 
  <p align="center"><img src="https://zupimages.net/up/20/10/ju6t.png" width="400"></p>
 
 
  <script>
    let img = document.getElementById('img');
    function alternanceImage(src) {
      if (src === 'https://zupimages.net/up/20/10/qqni.png') {
        src = 'https://zupimages.net/up/20/10/gds4.png';
      } else {
        src = 'https://zupimages.net/up/20/10/qqni.png';
      }
      img.src = src;
    }
    img.addEventListener("click", function () {
      alternanceImage(this.src);
    });
  </script>
</body>
 
</html>

22/03/2020, 19h27
pauline1835

super merci ça fonctionne!
ça fait des jours que j'essayais

merci :)
22/03/2020, 19h47
Beginner.

Oui avec le confinement on a du temps pour essayer...