script if/else pour alternance d'images

**pauline1835** · 21/03/2020, 20h14

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

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

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>

script if/else pour alternance d'images

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager