Javascript - document.images[n].src

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 (0 à n) avec les données des différentes images constitutives de cette page web. Les valeurs de 0 à n définissent un numéro pour chaque image par ordre d'apparition lors du chargement de la page. ATTENTION le décompte commence à 0.

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.

Code

<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>

Résultat

Optimisation

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;

}

Autres possibilités

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;