Modèle:Animation test jour

<html>

Animation de présentation des événements d'une journée.

<iframe title="Animation GLPI" style="border:2px solid black;" width="768" height="576" src="https://kono.phpage.fr/animation/tutorial-layers.fr.sozi.html">Sozi</iframe>

Utiliser les boutons pour naviguer entre les vues :

<input id="btn-prec" type="button" value="←" title="Aller à la vue précédente">

Chargement…

<input id="btn-suiv" type="button" value="→" title="Aller à la vue suivante">

<script>

   window.addEventListener("load", function () {
       var frame     = document.querySelector("iframe");
       var btnPrec   = document.getElementById("btn-prec");
       var btnSuiv   = document.getElementById("btn-suiv");
       var spanTitre = document.getElementById("titre-vue");

       var player = frame.contentWindow.sozi.player;

       spanTitre.innerHTML = player.currentFrame.title;

       btnPrec.addEventListener("click", function () {
           player.moveToPrevious();
       }, false);

       btnSuiv.addEventListener("click", function () {
           player.moveToNext();
       }, false);

       player.addListener("frameChange", function () {
           spanTitre.innerHTML = player.currentFrame.title;
       });
   }, false);

</script> </html>