Script if/else pour alternance d'images

Fermé

Pauline1835 - Modifié le 22 mars 2020 à 17:50
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 22 mars 2020 à 18:19

bonjour

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

je voudrais qu'en cliquant sur l'image https://www.zupimages.net/up/20/10/qqni.png ce soit l'image https://www.zupimages.net/ 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

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Projet informatique </title>
 
<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>
 
    </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>

A voir également:

Script if/else pour alternance d'images
Script vidéo youtube - Guide
Images gratuites - Guide
Google images - Guide
Script bat - Guide
Nommez une alternative libre au logiciel propriétaire winzip. vous pouvez consulter l’annuaire des logiciels libres du site framasoft pour répondre à la question. ✓ - Forum Compression

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
22 mars 2020 à 17:54

Bonjour,

Comment ça...elle apparait en double ?
Peux tu nous faire une capture écran ?
Peux tu également nous fournir le code généré de ta page ? ( tu ouvres ta page dans ton navigateur et tu fais CTRL + u et tu nous colles le code ici)

NB : Merci d'utiliser les balises de code ET d'y préciser le LANGAGE afin d'avoir la coloration syntaxique.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

PS: j'ai édité ton message pour corriger les balises de code.

Pauline1835
Modifié le 22 mars 2020 à 18:20

bonjour
voici la capture:
https://zupimages.net/viewer.php?id=20%2F12%2F6k3q.png
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

et le code

<!DOCTYPE html>
<html lang="fr">
    <head>
  <title>Projet informatique </title>

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

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

je ne vois pas ce que vous avez édité

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > Pauline1835
22 mars 2020 à 18:19

Ta capture écran correspond bien à ton code....

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)

Fonction if exist et else

code couleur associé a une image

voir ses images enregistrés

ou sont enregistrées les images

Discussions similaires

Newsletters