Choix d'un dossier d'images

Version imprimable

Bonjour, je souhaite dérouler un diaporama avec des images différentes lors d'un click sur des boutons différents. Voici le code que j'ai recopié mais il ne marche que pour un seul bouton et un seul dossier de photos.

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
var slideShowSpeed = 5000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = 'diaporama/ambiance/img0.jpg'
Pic[1] = 'diaporama/ambiance/img1.jpg'
Pic[2] = 'diaporama/ambiance/img2.jpg'
Pic[3] = 'diaporama/ambiance/img3.jpg'
Pic[4] = 'diaporama/ambiance/img4.jpg'
 
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>
<img src="images/fond galerie.jpg" width="1000" height="667" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="84,570,172,639" href="#" onclick="runSlideShow()"/>
<area shape="rect" coords="205,571,294,639" href="bouton1" />
<area shape="rect" coords="332,572,420,639" href="bouton2" />
<area shape="rect" coords="454,571,543,639" href="bouton3" />
<area shape="rect" coords="576,571,664,639" href="#" />
<area shape="rect" coords="698,572,786,639" href="#" />
<area shape="rect" coords="812,571,897,638" href="#" />
</map>
<div id="image">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=318 width=432>
<img src="fichiers de construction/slideshow1_1.jpg" name='SlideShow' width=454 height=333></td>
</tr>
</table>
</div>
</body>

Merci par avance.

04/12/2008, 09h57
SpaceFrog

Dossier ???
heu javascript ne sait pas charger le contenu d'un répertoire, d'ailleurs dans ton code on voit bien que les images sont préchargées dans un array javascript...
Sois un peu plus précis quand au nom des repertoires et à celui des images ... est ce un nommage rationnel ? Si non il faudra soit tou précharger en JS ce qui veut dire que si tu ajoutes des images dasn un repertoire il faudra modifier ton code js,
soit passer par un langage serveur pour automatiser le renseignement des arrays javascript .
04/12/2008, 19h08
lyberty6

Merci pour ta reponse, je me suis mal exprimé, je veux precharger les images dans un array, avec un nommage rationnel et pouvoir afficher celle que je choisis en cliquant sur un bouton.

à ce moment là il faut avoir plusieurs arrays

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
var Pic1 = new Array()
Pic1[0] = 'diaporama/ambiance/img0.jpg'
Pic1[1] = 'diaporama/ambiance/img1.jpg'
Pic1[2] = 'diaporama/ambiance/img2.jpg'
Pic1[3] = 'diaporama/ambiance/img3.jpg'
Pic1[4] = 'diaporama/ambiance/img4.jpg'
 
var Pic2 = new Array()
Pic2[0] = 'diaporama/ambiance/img0.jpg'
Pic2[1] = 'diaporama/ambiance/img1.jpg'
Pic2[2] = 'diaporama/ambiance/img2.jpg'
Pic2[3] = 'diaporama/ambiance/img3.jpg'
Pic2[4] = 'diaporama/ambiance/img4.jpg'

.../...

et une focntion d'intialisation du diaporama

Code:

1
2
3
4
5
6
7
8
9
10
 
function initDiapo(Lot){
var t
var j = 0
var p = Lot.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Lot[i]
}

comme ça tu modifies le contenu du diaporama

J'ai inséré ton code comme ceci, mais il n'y a que la dernière image de l'array qui s'affiche. J'ai du oublié quelque chose mais je ne vois pas quoi.
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
<script>
// Definir la vitesse slideShowSpeed en millisecondes
var slideShowSpeed = 5000
// La durée de crossfade en secondes)
var crossFadeDuration = 3
 
var Pic1 = new Array()
Pic1[0] = 'diaporama/ambiance/img0.jpg'
Pic1[1] = 'diaporama/ambiance/img1.jpg'
Pic1[2] = 'diaporama/ambiance/img2.jpg'
Pic1[3] = 'diaporama/ambiance/img3.jpg'
Pic1[4] = 'diaporama/ambiance/img4.jpg'
 
var Pic2 = new Array()
Pic2[0] = 'diaporama/histoire de femmes/img0.jpg'
Pic2[1] = 'diaporama/histoire de femmes/img1.jpg'
Pic2[2] = 'diaporama/histoire de femmes/img2.jpg'
Pic2[3] = 'diaporama/histoire de femmes/img3.jpg'
Pic2[4] = 'diaporama/histoire de femmes/img4.jpg'
 
function initDiapo(Lot){
var t
var j = 0
var p = Lot.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Lot[i]
runSlideShow()
}
 
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>
<img src="images/fond galerie.jpg" width="1000" height="667" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="84,570,172,639" href="#" onclick="initDiapo(Pic1)"/>
<area shape="rect" coords="205,571,294,639" href="#" onclick="initDiapo(Pic2)"/>