créer un bouton pour afficher une image

**wawrint** · 10/07/2008, 10h42

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

**franculo_caoulene** · 10/07/2008, 10h45

Salut,

Il faudrait qu'on déplace ton message vers le forum Javascript, car c'est ce qui doit être utiliser pour ça.

**SpaceFrog** · 10/07/2008, 10h56

un recherche avec un mot magique :

diaporama

**wawrint** · 10/07/2008, 12h09

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>

**Auteur** · 10/07/2008, 12h57

http://www.developpez.net/forums/sho...d.php?t=543119

Code intitulé "simple diaporama" (n°4)

**wawrint** · 11/07/2008, 11h27

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

**SpaceFrog** · 11/07/2008, 11h48

regarde plutot la reponse d'Ebzz

**Auteur** · 11/07/2008, 11h54

Envoyé par SpaceFrog

regarde plutot la reponse d'Ebzz

il n'est pas intervenu dans la discussion...

**wawrint** · 11/07/2008, 12h06

oh kel bonheur

merci vous etes vraiments simpa, meri...

**SpaceFrog** · 11/07/2008, 12h08

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

créer un bouton pour afficher une image

JavaScript

Vue hybride

Discussions similaires

Partager

Partager