Affichage d'image pendant un certain temps

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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.

26/04/2017, 14h42
Kennel sébastien

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é.
26/04/2017, 14h50
Java Ou Javapas

Citation:

Envoyé par Kennel sébastien

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

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

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 :)
26/04/2017, 15h15
Kennel sébastien

Citation:

je connais tres peu de choses en javascript c'est quoi la fonction anonyme dont tu

Code:

function(){document.getElementById('img').style.display = \"none\";}

Citation:

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:

document.getElementById('img').style.display = \"none\";

Or tes div sont identifiés avec des numéros

Code:

<div id=\"img"+i+"\"><img src=\""+elem.cheminFichier+"\"/></div>
26/04/2017, 16h56
SpaceFrog

Après il existe un plugin sympa de jquery => Jquery Cycle
http://jquery.malsup.com/cycle/
27/04/2017, 08h49
Invité

Bonjour,

un slider d'image uniquement en CSS3
27/04/2017, 10h53
Java Ou Javapas

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 ? 8O
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
27/04/2017, 11h00
Kennel sébastien

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.
27/04/2017, 11h05
Invité
- Simple slide avec Javascript (démo)
27/04/2017, 11h08
SpaceFrog

oui avec jquery cycle les temps sont paramétrables ...

comme ca ?

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

27/04/2017, 11h45
Kennel sébastien

Hum, tu confonds Java et JavaScript…

Tu peux faire simplement aussi :

Code:

<div id=\"img"+i+"\" style="display: none"><img src=\""+elem.cheminFichier+"\"/></div>

ben avec le setTimeout rien ne s'affiche :weird:

Code:

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:

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>");

:aie:

27/04/2017, 15h12
Invité

Il faut soigner la syntaxe... et aussi VERIFIER le code généré !

Code:

+"<script ..........:"+elem.duree+000+"});</script>");

Code:

+"<script ..........:"+elem.duree+"000});</script>");

ou

Code:

+"<script ..........:"+(elem.duree*1000)+"});</script>");
27/04/2017, 15h20
Kennel sébastien
Tu fais apparaitre le premier après la boucle :

Code:

document.getElementById('img0').style.display = 'block';

Et pour la fonction « setTimeout » tu as quelque chose comme :
Code:

1 2 3 4 var test = setTimeout(function() { document.getElementById('img0').style.display = 'none'; document.getElementById('img1').style.display = 'block'; }, elem.duree + 000);

Citation:

Envoyé par Kennel sébastien

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:

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:

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

27/04/2017, 20h45
Beginner.

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...
27/04/2017, 20h55
Kennel sébastien
ben pour ton problème d'image c'est parce que tu as oublié un « > » aux balises div :

Code:

<div id=\"img"+i+"\" style="display: none"><img src=\""+tabElement.get(i).cheminFichier+"\"/></div>

Pense aussi à fermé l'écriture de ton code Java :
Code:

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…
27/04/2017, 21h23
Invité

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
27/04/2017, 21h29
Beginner.

Citation:

Envoyé par jreaux62

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

Voir 40 message(s) de cette discussion en une page