Affichage liste d'image

Version imprimable

15/02/2007, 15h53
J0r_x

Affichage liste d'image

Bonjour,

J'ai les noms d'une liste d'image dans un tableau javascript et j'aimerais que ces images soient affichés dans une liste (un peu comme la balise [code] juste pour la forme) avec un scroll bar en bas.
Que faut-il utiliser pour faire ça ?

bonjour,

comme ceci :
Variable sens: si sens=0 tu as un affichage horizontal, si sens=1 tu as un affichage vertical.

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
90
91
92
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.conteneurH{
 width: 200px;;
 height: 80px;
 overflow: auto;
 border: ridge 2px #AAAAAA;
}
.horizontal{
 margin: 2px;
 height: 50px;
 sensical-align: middle;
}
 
.conteneurV{
 text-align: center;
 padding: 5px;
 border: ridge 2px #AAAAAA;
 width: 100px;
 height: 200px;
 overflow: auto;
}
.vertical{
 margin: 2px;
 width: 50px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var sens = 0;  //Pour affichage : 0 = horizontal ; 1 = vertical
 
//Tableau des images
var mesImages = new Array();
mesImages[0] = "i0.gif";
mesImages[1] = "i1.gif";
mesImages[2] = "i2.gif";
mesImages[3] = "i3.gif";
mesImages[4] = "i4.gif";
mesImages[5] = "i5.gif";
mesImages[6] = "i6.gif";
 
function diaporama()
{
 var i, elmt, c;
 
 c = document.getElementById("idConteneur");
 
 if (sens==1)
     c.className = "conteneurV";
 else
 {
     c.className = "conteneurH";
     elmt = document.createElement("nobr");
     c.appendChild(elmt);
     c = elmt;
 }
 
 
 for (i=0; i<mesImages.length; i++)
 {
   elmt = document.createElement("img");
   elmt.id = "idImage"+this.i;
   elmt.src = mesImages[i];
   if (sens==1)
       elmt.className = "vertical";
   else
       elmt.className = "horizontal";
 
   c.appendChild(elmt);
 }
 
}
 
//-->
</script>
 
</head>
 
<body onload="diaporama()">
 
<div id="idConteneur"></div>
 
</body>
 
</html>

16/02/2007, 09h30
J0r_x

Merci c'est exactement ce que je veux, par contre je voudrais ajouter aux images un evenement onClick que faut-il que je fasse ?

dans la boucle for :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
for (i=0; i<mesImages.length; i++)
 {
   elmt = document.createElement("img");
   elmt.id = "idImage"+this.i;
   elmt.src = mesImages[i];
 
   elmt.onclick=function(){alert("coucou "+this.i)};
 
   if (sens==1)
       elmt.className = "vertical";
   else
       elmt.className = "horizontal";
 
   c.appendChild(elmt);
 }

cf.
http://javascript.developpez.com/faq...lick.dynamique

16/02/2007, 14h30
J0r_x

Merci de ton aide tous fonctionne parfaitement maintenant.