DIAPORAMA À DURÉES VARIABLES


PRÉSENTATION PROJET

Nous imaginons que vous voulez créer pour une exposition un diaporama comprenant des pages de texte, des graphiques, des dessins, des titres. Nous voulons naturellement que ce programme soit utilisable par internet à partir de n'importe quel PC. Précisons cependant que ce programme ne fonctionnera pas forcément sur tablette ou smartphone qui ne disposent pas toujours, nous l'avons dit, de wiever (navigateur léger) capable de lire toutes les commandes javascript.

Remarque
Pour être sûr que le diaporama passe sur tous les appareils, même les plus rudimentaires, la seule solution serait de réaliser une vidéo, donc d'avoir recours à un logiciel lourd de traitement vidéo.

Voici par exemple le contenu des diapos avec leur temps de lecture estimé:

diapo1 (titre) 5 s
diapo2 (texte) 40 s
diapo3 (schéma) 8 s
diapo4 (texte) 30 s
diapo5 (graphique) 14 s

Chaque diapo correspondra à une page html. La durée de chaque page et le passage à la page suivante seront déterminés par la commande javascript setTimeout, pour nous sans doute la plus importante de ce langage, car aucune commande PHP ne saurait la remplacer. En effet, le logiciel PHP qui exécute le programme se trouve sur le serveur, il renvoie la page interprétée en html immédiatement. Seule une action de l'internaute (clic de souris par exemple) pourrait déclencher un évènement sur cette page. Au lieu de cela, la commande javascript setTimeout est exécutée par le navigateur lui-même qui peut donc, à l'issue de la commande, réaliser une action après avoir affiché la page.

Voici quel serait le contenu de la page diapo3.htm par exemple qui doit s'afficher pendant 8 s avant de passer automatiquement à la page suivante diapo4.htm:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mon premier programme javascrit</title>
<meta name="description" content="mon diaporama">
<meta name="author" content="mon nom">
</head>

<body>

Mon schéma ci-dessous:
<br><br>

<img src="mon_schema.png" alt="schéma tutoriel">

<script language="javascript">
setTimeout("window.location.replace('diapo4.htm')",30000);
</script>

</body>

</html>


Ce programme comprend:

-ouverture de la balise javascript

-commande setTimeout

window indique que la commande s'applique à la fenêtre du fichier en cours

location.replace est la fonction indiquant l'action de changement de fichier

diapo4.htm: fichier de destination

8000: durée après laquelle le changement de fichier se réalisera (en millisecondes).

-fermeture de la balise javascript

Pour la page diapo4.htm de durée 30s, la programmation deviendrait, pour le corps du fichier, entre les balises d'ouverture et de fermeture du body:

Mon texte ici...

<script language="javascript">
setTimeout("window.location.replace('diapo4.htm')",30000);
</script>

Quand vous avez ainsi programmé vos 5 fichiers correspondant chacun à une diapo, vous pouvez vérifier leur fonctionnement en local. Pour le mettre en ligne et l'utiliser à partir de n'importe quel PC, vous devez télécharger sur le site de votre hébergeur ces fichiers ainsi que les images grâce à un logiciel ftp (par exemple gftp sous une distribution Linux).

Remarquez que le diaporama est obtenu par une solution programmatique très simple et très rapide.

Traquenard
Remarquez le T majuscule à l'intérieur du nom de la commande setTimeout. S'il est minuscule, ça fonctionne pas.

Traquenard
Remarquez le double entourage emboité utilisant des guillements doubles et simples ainsi que la double parenthèse, sources fréquentes d'erreur dans l'écriture de cette fonction.

Remarque
La fonction javascript peut se trouver avant ou après le texte de la page. Dans tous les cas, le navigateur affiche immédiatement la totalité de la page.


SOMMAIRE