créer un bouton pour afficher une image

Version imprimable

10/07/2008, 10h42
wawrint

créer un bouton pour afficher une image

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
10/07/2008, 10h45
franculo_caoulene

Salut,

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

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:

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>

10/07/2008, 12h57
Auteur

http://www.developpez.net/forums/sho...d.php?t=543119
:arrow: 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:

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

11/07/2008, 11h35
SpaceFrog

createElement c'est pour créer des balises ...
div span ....
certainement pas une balise <image bruitée>

à la limite

Code:

document.createTextNod(Tabtx[i]) ...

Dans la partie HTML j'ai ajouté un div (id="titreImg") et j'applique la classe .texte.

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
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=" |&lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn2" type="button" value=" &lt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn3" type="button" value=" &gt; " onclick="defileImage(this)" />
  <input class="bouton" id="btn4" type="button" value=" &gt;| " onclick="defileImage(this)"/>
</div>
 
<div>
  <br/><br/><br/>
</div>
 
<div id="Cvignettes" class="listeVignettes">
</div>
 
</body>
 
</html>

Code javascript :

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

Code:

1
2
 
  document.getElementById("titreImg").innerHTML = (tabTxt[i]?tabTxt[i]:"");

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.

éventuellement tu peux remplacer

Code:

(tabTxt[i]?tabTxt[i]:"")

par

Code:

(tabTxt[i]?tabTxt[i]:" ")

[edit]
petite faute de frappe Spacefrog >> c'est :

Code:

1
2
document.createTextNode(Tabtx[i]) ...

;)
[/edit]

11/07/2008, 11h46
wawrint

oui j'ai rajouter "document.createTextNod(Tabtx[i]) " mais ça ne marche pas.
faut-il rajouter un code ou balise dans le code html??
11/07/2008, 11h48
SpaceFrog

regarde plutot la reponse d'Ebzz
11/07/2008, 11h54
Auteur

Citation:

Envoyé par SpaceFrog

regarde plutot la reponse d'Ebzz

8O
il n'est pas intervenu dans la discussion... :aie:
11/07/2008, 12h06
wawrint

oh kel bonheur:lol: merci vous etes vraiments simpa, meri...

Code:

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