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 :

Affichage d'image pendant un certain temps


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut Affichage d'image pendant un certain temps
    Salut tout le monde, voila je cherche a afficher une image pendant un certain temps puis la remplacer par une autre pendant un autre temps etc...
    et j'ai quelque probleme avec le script (je développe ca en java : un bouton va creer un fichier html qui me permet de faire ca)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
             fw.write("<DOCTYPE html><HTML><HEAD><TITLE>Apercu du Scenario</TITLE> </HEAD><BODY> ");
            for(ElementInit elem : tabElement){
     
                fw.write("<div id=\"img"+i+"\"><img src=\""+elem.cheminFichier+"\"/></div>"
                         +"<script type=\"text/javascript\"> var test =  setTimeout(function(){document.getElementById('img').style.display = \"none\";},"+elem.duree+000+");</script>");
                i++;
            }
            fw.write("</BODY>\n </HTML>");
    sachant que elem.cheminFichier est le chemin du fichier et elem.duree la durée d'affichage en secondes (c'est pour ça que j'ai rajouté 000 car la fonction setTimeout est en millisecondes) et la boucle for est une boucle qui parcourt un tableau d'objet "tabElement"
    et ça ça m'affiche juste les images a la suite les unes des autres, alors que je souhaiterais en afficher une pendant un certain temps puis la faire disparaitre et faire apparaitre l'autre.

  2. #2
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    Bonjour Java Ou Javapas,

    Ben c'est normal tu fais bien une boucle pour écrire à chaque fois le même code…

    C'est ta fonction anonyme de la fonction « setTimeout » qui doit connaître la source de ta nouvelle image.

    Où alors si tu veux une boucle il faut cacher par défaut tout les images non active sur le moment et changer la visibilité à chaque temps écoulé.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut
    Citation Envoyé par Kennel sébastien Voir le message

    Ben c'est normal tu fais bien une boucle pour écrire à chaque fois le même code…
    comment ca ? je n'ecris pas le meme code car les variables elem.qqch sont differentes a chaque tout de boucle...

    Citation Envoyé par Kennel sébastien Voir le message
    C'est ta fonction anonyme de la fonction « setTimeout » qui doit connaître la source de ta nouvelle image.
    je connais tres peu de choses en javascript c'est quoi la fonction anonyme dont tu

    Citation Envoyé par Kennel sébastien Voir le message
    Où alors si tu veux une boucle il faut cacher par défaut tout les images non active sur le moment et changer la visibilité à chaque temps écoulé.
    comment on cache les images ?
    Merci

  4. #4
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    je connais tres peu de choses en javascript c'est quoi la fonction anonyme dont tu
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function(){document.getElementById('img').style.display = \"none\";}
    comment on cache les images ?
    Ben tu l'utilises dans un sens, sauf que tu utilises pas le bon identificateur et au bon endroit…

    Tu as écrit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('img').style.display = \"none\";
    Or tes div sont identifiés avec des numéros

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id=\"img"+i+"\"><img src=\""+elem.cheminFichier+"\"/></div>

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    Après il existe un plugin sympa de jquery => Jquery Cycle
    http://jquery.malsup.com/cycle/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Invité
    Invité(e)

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut
    Bonjour,
    jreaux62 => c'est sympa comme truc mais moi le but c'est que les images passe a une autre au bout d'un certain temps (en adaptant c'est peut être possible)
    SpaceFrog => le "fade" est intéressant mais est est-ce qu'on peut lui donner un temps avant de passer a une autre image ? et comment on l’intègre dans le code html ?
    Kennel sébastien => en effet j'ai corrigé ca mais maintenant je lance la page les images s'affiche en mêm temps et disparaissent juste après

  8. #8
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    Pour faire en sorte que les images sont de suite cachés, tu le fais directement en CSS. Tu places juste une class sur les div.

    Puis c'est donc au niveau du JS que tu vas faire apparaitre l'image X.

  9. #9
    Invité
    Invité(e)

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    oui avec jquery cycle les temps sont paramétrables ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut
    comme ca ?
    Code : 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
        void apercuHTML() throws IOException{
            int i =0;
            //cration du fichier css
            File apercuCSS =new File("Apercu.css");
            try(FileWriter fw = new FileWriter (apercuCSS)){
                //on écrit dedans 
                fw.write("#imagecachee\n{\n display : none;\n}");
                fw.close();
            }
            //création du fichier html
            File apercu =new File("Apercu.html");
            try(FileWriter fw = new FileWriter (apercu)){
                //on écrit le début de l'html
                fw.write("<DOCTYPE html><HTML><HEAD><TITLE>Apercu du Scenario</TITLE><link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" title=\"page_web\" href=\"Apercu.css\"/>  </HEAD><BODY> ");
                for(ElementInit elem : tabElement){
                    //script pour afficher chaque image un certain temps
                    fw.write("<div id=\"img"+i+"\"><img src=\""+elem.cheminFichier+"\"/></div>"
                         +"<imagecachee><script type=\"text/javascript\"> var test =  setTimeout(function(){document.getElementById('img"+i+"').style.display = \"none\";},"+elem.duree+");</script></imagecachee");
                    i++;
                }
                fw.write("</BODY>\n </HTML>");
                fw.close();
                Desktop.getDesktop().browse(apercu.toURI());
            }
        }
    toutes les images s'affichent mais passe directement a l'autre et la dernière s'affiche longtemps...

  12. #12
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    Hum, tu confonds Java et JavaScript…

    Tu peux faire simplement aussi :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id=\"img"+i+"\" style="display: none"><img src=\""+elem.cheminFichier+"\"/></div>

  13. #13
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut
    ben avec le setTimeout rien ne s'affiche
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
                fw.write("<DOCTYPE html><HTML><HEAD><TITLE>Apercu du Scenario</TITLE>  </HEAD><BODY> "
                        + "<script type=\"text/javascript\"src=\"jquery.js\"></script>");
                for(ElementInit elem : tabElement){
                    //script pour afficher chaque image un certain temps
                    fw.write("<div id=\"img"+i+"\"<img src=\""+elem.cheminFichier+"\"/></div>"
     
                         +"<script type=\"text/javascript\"> var test =  setTimeout(function(){document.getElementById('img"+i+"').style.display = \"block\";},"+elem.duree+000+");</script>");
    et j'ai essayé avec jquery mais rien ne s'affiche non plus
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
                fw.write("<DOCTYPE html><HTML><HEAD><TITLE>Apercu du Scenario</TITLE>  </HEAD><BODY> "
                        + "<script type=\"text/javascript\"src=\"jquery.js\"></script>");
                for(ElementInit elem : tabElement){
                    //script pour afficher chaque image un certain temps
                    fw.write("<div id=\"img"+i+"\"<img src=\""+elem.cheminFichier+"\"/></div>"
                            +"<script type=\"text/javascript\"> $('#img"+i+"'.cycle({fx:'fade',timeout:"+elem.duree+000+"});</script>");

  14. #14
    Invité
    Invité(e)
    Par défaut
    Il faut soigner la syntaxe... et aussi VERIFIER le code généré !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    +"<script ..........:"+elem.duree+000+"});</script>");
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    +"<script ..........:"+elem.duree+"000});</script>");
    ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    +"<script ..........:"+(elem.duree*1000)+"});</script>");

  15. #15
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    Tu fais apparaitre le premier après la boucle :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('img0').style.display = 'block';
    Et pour la fonction « setTimeout » tu as quelque chose comme :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var test = setTimeout(function() {
        document.getElementById('img0').style.display = 'none';
        document.getElementById('img1').style.display = 'block';
    }, elem.duree + 000);

  16. #16
    Nouveau membre du Club
    Homme Profil pro
    Développeur en alternance
    Inscrit en
    Décembre 2016
    Messages
    112
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur en alternance
    Secteur : Enseignement

    Informations forums :
    Inscription : Décembre 2016
    Messages : 112
    Points : 29
    Points
    29
    Par défaut
    Citation Envoyé par Kennel sébastien Voir le message
    Tu fais apparaitre le premier après la boucle :
    tu veux dire avant ? je pouvais pas avec un for each (car sinon l'affichage de la première image se ferait deux fois...) du coup j'utilise une boucle normale (tabElement = tableau d'objet)
    Code : 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
            int i =0;
            //création du fichier html
            File apercu =new File("Apercu.html");
            try(FileWriter fw = new FileWriter (apercu)){
                //on écrit le début de l'html
                fw.write("<DOCTYPE html><HTML><HEAD><TITLE>Apercu du Scenario</TITLE>  </HEAD><BODY> <div id=\"img"+i+"\"<img src=\""+tabElement.get(i).cheminFichier+"\"/></div>"
                        + "<script type=\"text/javascript\">var test=setTimeout(function(){document.getElementById('img"+i+"').style.display = 'block';},"+tabElement.get(i).duree+"000);</script>");
                i++;
                for(int j=1;j<tabElement.size();j++){
                    //script pour afficher chaque image un certain temps
                    fw.write("<div id=\"img"+i+"\"<img src=\""+tabElement.get(j).cheminFichier+"\"/></div>");
                    i--;
                    fw.write("<script type=\"text/javascript\"> var test =  setTimeout(function(){document.getElementById('img"+i+"').style.display = 'none';");
                    i++;
                    fw.write("document.getElementById('img"+i+"').style.display = 'block';},"+tabElement.get(j).duree+"000);</script>");
                    i++;
                }
     
                fw.write("</BODY>\n </HTML>");
    et ca me donne ce code html lorsque je chosit deux image
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <DOCTYPE html><HTML>
    <HEAD>
    <TITLE>Apercu du Scenario</TITLE>  
    </HEAD>
    <BODY> 
    <div id="img0"<img src="C:\Users\Pictures\2016-06-01\001.jpg"/></div>
    <script type="text/javascript">var test=setTimeout(function(){document.getElementById('img0').style.display = 'block';},45000);</script>
    <div id="img1"<img src="C:\Users\Pictures\Saved Pictures\IMG_1144 (2).jpg"/></div>
    <script type="text/javascript"> var test =  setTimeout(function(){document.getElementById('img0').style.display = 'none';document.getElementById('img1').style.display = 'block';},10000);</script>
    </BODY>
     </HTML>
    mais toujours aucune image d'afficher...j'ai vérifié la syntaxe et j'ai pas vu de problèmes

  17. #17
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Je débarque mais je n'ai pas tout suivi...

    - Tu es sûr que c'est ce que tu veux à la ligne 6 et 8 ? Cela me semble étrange, ne manque-t-il pas le caractère ">" ?

    La ligne 6 par exemple : <div id="img0"<img src="C:\Users\Pictures\2016-06-01\001.jpg"/></div>

    Est-ce vraiment cela que tu veux ou bien ceci : <div id="img0"><img src="C:\Users\Pictures\2016-06-01\001.jpg"/></div>

    - Sinon tu écris dans les fichiers en Java, c'est ça ? Où/avec quoi affiches-tu la page html ?

    - Par contre je pense que ce serait mieux de mettre d'abord tes fonctions au point et ensuite seulement (une fois que ça marche) écrire le code dans des fichiers...

  18. #18
    Membre averti Avatar de Kennel sébastien
    Homme Profil pro
    Développeur
    Inscrit en
    Septembre 2008
    Messages
    226
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Développeur

    Informations forums :
    Inscription : Septembre 2008
    Messages : 226
    Points : 329
    Points
    329
    Par défaut
    ben pour ton problème d'image c'est parce que tu as oublié un « > » aux balises div :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id=\"img"+i+"\" style="display: none"><img src=\""+tabElement.get(i).cheminFichier+"\"/></div>
    Pense aussi à fermé l'écriture de ton code Java :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    fw.write("</BODY>\n </HTML>");
    fw.close();
    Sinon au niveau du temps la première image apparait au bout de 45 secondes or que la seconde au bout de 10 secondes…

  19. #19
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Ton code ne vaut pas grand chose : tu redéfinis la variable "test" à chaque boucle,...

    CONSEIL : avant de le mettre dans ton code Java -> TESTE DIRECTEMENT le code HTML / Javascript !

    => CHERCHE et TROUVE un code fonctionnel * ("du commerce", vu que tes connaissances en JS semblent limitées), que tu pourras ENSUITE intégrer à ton code Java.


    * Celui proposé par SpaceFrog, par exemple

  20. #20
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par jreaux62 Voir le message
    CONSEIL : avant de le mettre dans ton code Java -> TESTE DIRECTEMENT le code HTML / Javascript !
    Je suis d'accord j'ai d'ailleurs donné le même conseil... Par contre je pense que c'est assez simple à faire sans JQuery ou autres...

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 3 123 DernièreDernière

Discussions similaires

  1. afficher une image pendant un certain temps sur une page
    Par fraizas77 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/06/2009, 17h53
  2. Comment afficher un message pendant un certain temps ?
    Par potili2 dans le forum Débuter
    Réponses: 4
    Dernier message: 16/01/2008, 12h08
  3. Afficher pendant un certain temps un popup menu
    Par dahu29 dans le forum Interfaces Graphiques en Java
    Réponses: 2
    Dernier message: 30/05/2006, 15h27
  4. [Thread] Invocation méthode pendant un certain temps
    Par the java lover dans le forum Concurrence et multi-thread
    Réponses: 11
    Dernier message: 01/02/2006, 19h11

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