Comment créer un diaporama avec javascript

Complément très technique de la fiche

Comment créer un diaporama avec javascript

Code de la fonction à coller dans <HEAD>

On insère dans l'en-tête la fonction Javascript de passage à l'image suivante :

<SCRIPT><!-- Hide script from older browsers
thisImg = 1
imgCt = 13
function newSlide(direction) {
if (document.images) {
thisImg = thisImg + direction
if (thisImg < 1) { thisImg = imgCt }
if (thisImg > imgCt) { thisImg=1 }
document.slider.src = "images/slide" + thisImg + ".jpg" }
}
// stop hiding script --></SCRIPT>

Code à coller dans le <Body>:

cela va générer un tableau, une image centrale et deux boutons de part et d'autre

<TABLE BORDER=0 BGCOLOR="#FFFFFF" CELLSPACING=0 CELLPADDING=0>
<TR>
<TD WIDTH=700 HEIGHT=500>
<P><A HREF="javascript:newSlide(-1)"><IMG SRC="images/bouton_arriere.gif" WIDTH=20 HEIGHT=20 ALIGN=bottom></A><!--Le bouton pour passer l'image prcdente doit s'appeler bouton_arriere.gif-->
<!--Les images doivent faire 640x480, s'appeler slidex.jpg et se trouver dans un dossier "images" juste cote de ce fichier --><IMG SRC="images/slide1.jpg" WIDTH=640 HEIGHT=480 BORDER=0 ALIGN=middle name=slider>
<!--Le bouton pour passer l'image suivante doit s'appeler bouton_suivante.gif--><A HREF="javascript:newSlide(1)"><IMG SRC="images/bouton_suivante.gif" WIDTH=20 HEIGHT=20 ALIGN=bottom></A></P>
</TD>
</TR>
</TABLE>

Commentaire :

Le paramètre imgCt = 13 doit être adapté pour le nombre d'images que vous avez mises dans le dossier

On associe aux 2 boutons droite et gauche la fonction newSlide(direction).

<A HREF="javascript:newSlide(-1)"><IMG SRC="images/bouton_arriere.gif" WIDTH=20 HEIGHT=20 ALIGN=bottom></A>

F.Lo

Retour à la page de fiches multimédia @ tecfa

counter