IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Afficher image aléatoirement


Sujet :

JavaScript

  1. #1
    Membre régulier

    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    Novembre 2007
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Enseignement

    Informations forums :
    Inscription : Novembre 2007
    Messages : 94
    Points : 77
    Points
    77
    Par défaut Afficher image aléatoirement
    Bonjour.
    Je souhaite afficher une image aléatoirement sur une page web.

    J'ai créé le tableau contenant les images.
    Je fais calculer aléatoirement un entier de 1 à 6 (nombre d'images).
    Ensuite, je demande d'afficher le résultat.

    L'image n'apparaît pas, j'ai juste un petit carré.
    Je ne vois pas où je me trompe.

    D'avance merci.

    NB : la dernière ligné était juste pour vérifier que les images étaient à la bonne place. Elles le sont : l'image s'affiche dans la page.
    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
    40
    41
    42
    43
    44
    <head>
    <script type="text/javascript"
      src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     
    </head>
     
     
     
     
     
    <script>
    const ListeImages = [
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_3.gif" alt="1"></img>',
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_2.gif" alt="2"></img>',
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_5.gif" alt="3"></img>',
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_6.gif" alt="4"></img>',
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_4.gif" alt="5"></img>',
    '<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_1.gif" alt="6"></img>',
     
    ];
     
     
     
    function afficherImage() {
    var a = Math.floor(Math.random() * 6);
    var image = ListeImages[a];
     
    document.getElementById('Affichage').innerHTML = image;
     
     
    }
     
    setInterval(afficherImage, 1000);
     
     
    </script>
     
     
    <body onload="afficherImage()">
    	<div id="Affichage"></div>
     
     
    </body>
    <img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\dé_1.gif" ></img>

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 360
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 360
    Points : 15 708
    Points
    15 708
    Par défaut
    affichez le contenu de la variable image dans la console avec console.log(image);.

  3. #3
    Membre régulier

    Homme Profil pro
    Enseignant Chercheur
    Inscrit en
    Novembre 2007
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Enseignant Chercheur
    Secteur : Enseignement

    Informations forums :
    Inscription : Novembre 2007
    Messages : 94
    Points : 77
    Points
    77
    Par défaut
    Re-bonjour.
    Merci... mais cela ne fonctionnait pas non plus.
    J'ai changé les chemins en les restreignant à dé_1.gif....etc.
    Ca fonctionne.
    Une histoire de "chemin"... bizarre car avec la dernière ligne qui contient tout le chemin, ça fonctionne...

    Merci.
    Bonne journée.
    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
    <script>
     
    const ListeImages = [
    '<img src="de1.gif" alt="1"></img>',
    '<img src="de2.gif" alt="2"></img>',
    '<img src="de3.gif" alt="3"></img>',
    '<img src="de4.gif" alt="4"></img>',
    '<img src="de5.gif" alt="5"></img>',
    '<img src="de6.gif" alt="6"></img>',
     
    ];
     
     
     
    function afficherImage() {
    var a = Math.floor(Math.random() * 6);
    var image = ListeImages[a];
     
     
    document.getElementById('Affichage').innerHTML = image;
     
     
    }
     
    setInterval(afficherImage, 5000);
     
     
     
    </script>
     
     
    <body onload="afficherImage()">
    	<div id="Affichage"></div>
    		<img src="D:\BOULOT\BP Melec\2nde\Maths\Probas\Images\de1.gif"></img>
    </body>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher une image aléatoire
    Par Moloc'h dans le forum Contribuez / Téléchargez Sources et Outils
    Réponses: 2
    Dernier message: 14/07/2012, 23h06
  2. Réponses: 11
    Dernier message: 01/06/2012, 10h49
  3. Afficher 15 images aléatoires
    Par jarod6827 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 10/04/2010, 17h24
  4. Afficher une image aléatoirement sur un forum
    Par Lysgard dans le forum Langage
    Réponses: 5
    Dernier message: 30/01/2009, 14h32
  5. Afficher une image aléatoirement
    Par morgan47 dans le forum Langage
    Réponses: 5
    Dernier message: 23/10/2007, 12h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo