Copiez tout d'abord
ce code dans l'entête de votre page :
<SCRIPT LANGUAGE="JavaScript">
var rotate_delay = 1000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ?
"Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
Réglez simplement deux paramètres dans ce script : rotate_delay
indique le délai d'affichage entre deux images en cas de déroulement
automatique (en millisecondes), current qui
indique le numéro de l'image de départ (0
correspond à la première image de votre liste).
Créez ensuite votre visionneuse à proprement parler :
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="white">
<b>Image Slideshow</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="mon_image1.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="bora1.jpg" selected>image 1
<option value="bora2.jpg">image 2
<option value="bora3.jpg">image
3
<option value="bora4.jpg">image
4
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="I<<"
title="Début">
<input type=button onClick="previous();" value="<<"
title="Précédent">
<input type=button name="slidebutton" onClick="ap(this.value);"
value="I>" title="Lecture">
<input type=button onClick="next();" value=">>"
title="Suivant">
<input type=button onClick="last();" value=">>I"
title="Fin">
</td>
</tr>
</table>
</form>
Remplacez simplement les bora1.jpg,
bora2.jpg... par le nom de vos images,
et renseignez bien
la légende de chacune de ces images.