Un diaporama, boutons avance/recul

Présentation

Des photos (ou des images), de mêmes dimensions, qui s'affichent les unes après les autres dans le même cadre.

Le visiteur fait lui-même défiler les photos en avant ou en arrière par boutons de commande avec possibilité d'aller directement au début ou à la fin du diaporama.

Une légende est affichable pour chaque photo et la barre de statuts indique la position dans le diaporama.

Le Canal du Midi

Procédure

Plus loin remplacer aussi par le titre du diaporama, le nom, la largeur et la hauteur (en pixels) de la première photo.

Indiquer le répertoire des photos si différent du répertoire courant:  "repertoire/photoN.jpg"

var photo=new Array()

var texte=new Array()

var num=0

var txt=0

photo[0]="photo1.jpg"

texte[1]="Légende 2"

photo[2]="photo3.jpg"

texte[2]="Légende 3"

window.onload=new Function("legende.value=texte[txt]")

numero=num+1

total=photo.length

window.status='Diaporama photo '+numero+' sur '+total

function backward(){

if (num>0){

num--

image.src=photo[num];

txt--

legende.value=texte[txt];

numero=num+1

window.status='Diaporama photo '+numero+' sur '+total

}

}

function forward(){

if (num<photo.length-1){

num++

image.src=photo[num]

txt++

legende.value=texte[txt];

numero=num+1

window.status='Diaporama photo '+numero+' sur '+total

}

}

</script>

<tr>

<td align="center" width="100%" colspan="4"><p align="center"><font

color="#008000" face="Arial"><big><big><strong>TITRE</strong></big></big></font></p>

<p align="center"><img NAME="image" src="photo1.jpg" WIDTH="240" HEIGHT="179"> <br>

</td>

</tr>

<td align="left" width="30%"><p align="right"><input TYPE="button"

VALUE="&lt;&lt; Photo précédente" ONCLICK="backward()" NAME="B1"></p>

<p align="right"><input TYPE="button" VALUE="[ Début &lt;&lt;"

ONCLICK="num=1;txt=1;backward();return false" NAME="B3"></td>

<td align="center" width="40%"><input TYPE="text" NAME="legende"

size="30"><p>&nbsp;</td>

<td align="right" width="30%"><p align="left"><input TYPE="button"

VALUE="Photo suivante &gt;&gt;" ONCLICK="forward()" NAME="B2"></p>

<p align="left"><input TYPE="button" VALUE=" &gt;&gt; Fin ] "

ONCLICK="num=total;txt=total;backward();return false" NAME="B4"> </td>

</tr>

<tr>

photo[N]="photoN.jpg"

texte[N]="Légende N"

en remplaçant les parties oranges par le numéro (respecter l'ordre à la suite des précédents), le nom et la légende de chaque photo.