bonjour
je suis debutant et je voudrai savoir comment creer un bouton qui en clickant affiche une image, image par image , en fait deux boutons, un pour afficher l'image suivante et l'autre pour afficher l'image précédente.
merci
bonjour
je suis debutant et je voudrai savoir comment creer un bouton qui en clickant affiche une image, image par image , en fait deux boutons, un pour afficher l'image suivante et l'autre pour afficher l'image précédente.
merci
Salut,
Il faudrait qu'on déplace ton message vers le forum Javascript, car c'est ce qui doit être utiliser pour ça.
un recherche avec un mot magique :
diaporama
j'ai reussi a faire un diaporama. mais je voudrai defiler les images avec deux boutons, un pour suivant et l'autre pour précedent.
merci
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88 <html> <HEAD> <script> var slideShowSpeed = 10000 var crossFadeDuration = 3 var Pic = new Array() Pic[0] = 1.bmp' Pic[1] = 2.bmp' Pic[2] = 3.bmp' Pic[3] = '4.bmp' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } </script> </HEAD> <BODY onLoad="runSlideShow()"> <br><br><br><br><br><br><br><br><br><br> <p align="center"><table border="1" cellpadding="0" cellspacing="0"></p> <tr> <td id="VU" height=150 width=150> <p align="center"><img src="STREAM_IHM15.bmp" name='SlideShow' ></td></p> </tr> </table> </BODY> </html>
http://www.developpez.net/forums/sho...d.php?t=543119
Code intitulé "simple diaporama" (n°4)
bonjour
je viens de creer une diapo avec le liens : http://www.developpez.net/forums/sho....php?t=543119:
je voudrai afficher pour chaque image affichée un texte correspendant!!!
donc j'ai rajouté un tableTxt.et j'ai rajouté aussi document.createElement(tabTxt[i]), mais ça ne marche pas.!!!!!
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66 var chemin = "images/"; // dossier contenant les images var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif"); var tabTxt = new Array("image claire", "image troble", "image bruité", "image...", "image..."); var i; function defileImage(arg) { if (!isNaN(arg) && arg!=null) { i = arg; } if (arg==null) i = 0; else { switch (arg.id) { case "btn1": // id du bouton "première image" i = 0; break; case "btn2": // id du bouton "image précédente" i--; break; case "btn3": // id du bouton "image suivante" i++; break; case "btn4": // id du bouton "dernière image" i = tabImg.length-1; break; /*default: i=0;*/ } } document.getElementById("btn1").disabled = (i==0); document.getElementById("btn2").disabled = (i==0); document.getElementById("btn3").disabled = (i==tabImg.length-1); document.getElementById("btn4").disabled = (i==tabImg.length-1); document.getElementById("idImage").src = chemin + tabImg[i]; document.createElement(tabtxt[i]); } function afficheVignettes() { var j, objImg; var c; c = document.getElementById("Cvignettes"); for (j=0; j<tabImg.length; j++) { objImg = document.createElement("img"); objImg.src = chemin + tabImg[j]; objImg.className="vignettes"; objImg.n = j; objImg.onclick = function(){defileImage(this.n)} c.appendChild(objImg); } }
createElement c'est pour créer des balises ...
div span ....
certainement pas une balise <image bruitée>
à la limite
Code : Sélectionner tout - Visualiser dans une fenêtre à part document.createTextNod(Tabtx[i]) ...
Dans la partie HTML j'ai ajouté un div (id="titreImg") et j'applique la classe .texte.
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="fr" /> <meta name="Author" content="Auteur - www.developpez.com" /> <style type="text/css"> <!-- .conteneur{ text-align: center; width: 300px; } .bouton{ text-align: center; width: 50px; height: 30px; } .image{ width: 80px; } .texte{ text-align: center; width: 100%; border: none; font-size: 14pt; font-family: "Times New Roman"; } .listeVignettes{ border: ridge #AAAAAA 5px; overflow: auto; width: 300px; height: 100px; background-color: #000000; padding: 0px; } .vignettes{ width: 40px; margin: 4px; background-color: #FFFFFF; border: ridge #FFFFFF 2px; cursor: pointer; } --> </style> <script type="text/javascript" src="DiaporamaSimple.js"></script> <script type="text/javascript"> <!-- //--> </script> </head> <body onload="afficheVignettes(); defileImage(null)"> <div class="conteneur"> <img src="" id="idImage" class="image" alt="image" /><br /> <div class="texte" id="titreImg"> </div> <input class="bouton" id="btn1" type="button" value=" |< " onclick="defileImage(this)" /> <input class="bouton" id="btn2" type="button" value=" < " onclick="defileImage(this)" /> <input class="bouton" id="btn3" type="button" value=" > " onclick="defileImage(this)" /> <input class="bouton" id="btn4" type="button" value=" >| " onclick="defileImage(this)"/> </div> <div> <br/><br/><br/> </div> <div id="Cvignettes" class="listeVignettes"> </div> </body> </html>
Code javascript :
Code javascript : 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 var chemin = "images/"; // dossier contenant les images var tabImg = new Array("i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif","i1.gif", "i2.gif", "i3.gif", "i4.gif", "i5.gif"); var tabTxt = new Array("image claire", "image troble", "image bruité", "image...", "image..."); var i; function defileImage(arg) { if (!isNaN(arg) && arg!=null) { i = arg; } if (arg==null) i = 0; else { switch (arg.id) { case "btn1": // id du bouton "première image" i = 0; break; case "btn2": // id du bouton "image précédente" i--; break; case "btn3": // id du bouton "image suivante" i++; break; case "btn4": // id du bouton "dernière image" i = tabImg.length-1; break; /*default: i=0;*/ } } document.getElementById("btn1").disabled = (i==0); document.getElementById("btn2").disabled = (i==0); document.getElementById("btn3").disabled = (i==tabImg.length-1); document.getElementById("btn4").disabled = (i==tabImg.length-1); document.getElementById("idImage").src = chemin + tabImg[i]; document.getElementById("titreImg").innerHTML = (tabTxt[i]?tabTxt[i]:""); } function afficheVignettes() { var j, objImg, nobr; var c; c = document.getElementById("Cvignettes"); nobr = document.createElement("nobr"); for (j=0; j<tabImg.length; j++) { objImg = document.createElement("img"); objImg.src = chemin + tabImg[j]; objImg.className="vignettes"; objImg.n = j; objImg.onclick = function(){defileImage(this.n)} nobr.appendChild(objImg); } c.appendChild(nobr); }
j'ai simplement ajouté cette ligne :
Je remplis le div idTitre avec le contenu de tabTxt. Je teste [I]tabTxt : s'il existe j'ajoute le titre sinon je ne mets rien.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 document.getElementById("titreImg").innerHTML = (tabTxt[i]?tabTxt[i]:"");
éventuellement tu peux remplacer
par
Code : Sélectionner tout - Visualiser dans une fenêtre à part (tabTxt[i]?tabTxt[i]:"")
Code : Sélectionner tout - Visualiser dans une fenêtre à part (tabTxt[i]?tabTxt[i]:" ")
[edit]
petite faute de frappe Spacefrog >> c'est :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 document.createTextNode(Tabtx[i]) ...
[/edit]
oui j'ai rajouter "document.createTextNod(Tabtx[i]) " mais ça ne marche pas.
faut-il rajouter un code ou balise dans le code html??
regarde plutot la reponse d'Ebzz
oh kel bonheur merci vous etes vraiments simpa, meri...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 Mouarf :red: vous vous ressemblez tellement .... toutes mes confuses BDP Je parlais d'Auteur bien entendu ...
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager