Appel de plusieurs diaporamas dans la même page html
Bonjour, j'ai une page html avec une div ou je fais défiler des photos en diaporama. Cela fonctionne pour un répertoire d'images, mais je souhaiterai le faire pour plusieurs répertoires à l'aide de plusieurs boutons.
Voici le script :
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
|
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="bouton1" onclick="runSlideShow()"/>
<area shape="rect" coords="205,571,294,639" href="bonton2" />
<area shape="rect" coords="332,572,420,639" href="bouton3" />
<area shape="rect" coords="454,571,543,639" href="#" />
<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.