Lorsqu'un diaporama est présenté dans une page web, il n'est pas utile de recharger la page à chaque changement de photo après un clic sur une imagette inscrite en prévisualisation. L'image initialement chargée peut être uniquement modifiée. Pour cela, l'utilisation de la fonction document.images[n] est nécessaire.
Lorsqu'une page web est chargée, le navigateur enregistre en arrière plan un tableau (
Dans cet exemple, l'affichage comporte une image initiale et la possibilité de charger l'image précédente ou l'image suivante. Pour cela, deux fonctions javascript permettent d'augmenter ou de diminuer le numéro de l'image. La fonction precedent, appliquée à la première image du diaporama, permet de passer à la dernière image du diaporama. La fonction suivant() fait passer le curseur de la dernière à la première image du diaporama. Une troisième fonction gère quant à elle le chargement de la nouvelle image.
Il est préférable d'initialiser une variable (ici numImage) pour éviter des désagréments. L'incrémentation se fait par numImage++, ce qui est l'équivalent de numImage=numImage+1.
De la même façon, la décrémentation se fait par numImage--, ce qui est l'équivalent de numImage=numImage-1.
<html>
<head>
<script>
var numImage=2;
function precedent() {
numImage=numImage-1;
if (numImage<1) {numImage=n};
swapImage();
}
function suivant() {
numImage++;
if (numImage>n) {numImage=1};
swapImage();
}
function swapImage() {
if (numImage==1) {document.images[0].src="../Trombi/Photo_1.jpg"};
if (numImage==2) {document.images[0].src="../Trombi/Photo_2.jpg"};
...
if (numImage==n) {document.images[0].src="../Trombi/Photo_n.jpg"};
}
</script>
</head>
<body>
<center>
<img src="../Trombi/Photo_Initiale.jpg"/><br/>
<a href="javascript:precedent()">précédent</a>
<a href="javascript:suivant()">suivant</a>
</center>
</body>
</html>
La fonction swapImage() peut être optimisée. En effet, en s'apercevant que la valeur de numImage est identique à la valeur de la photo, il est possible de générer le nom du fichier de façon dynamique. La fonction devient alors
function swapImage() {
fichier="../Trombi/Photo_"+numImage+".jpg";
document.images[0].src=fichier;
}
De la même façon, d'autres paramètres de l'image peuvent être modifiés. Par exemple, pour la taille, le code suivant permettra d'en changer la largeur document.images[n].width.value=400;