Animation par un diaporama

Voici un évènement utile à plus d'un titre ! Certains diront sans doute qu'il s'agit d'un alourdissement de page par le chargement d'objets assez gourmands en octets, des photos par exemple. D'autres auront compris l'intérêt secondaire (mais si peu secondaire ... !) du même évènement pour des raisons différentes : la protection d'un format bien connu et largement utilisé sur la grande toile. Mais n'anticipons pas et voyons ce que je vous propose :

Il s'agit donc bien évidemment de l'affichage d'un certain nombre d'images, avec une temporisation que vous allez pouvoir régler, pour réaliser un évènement paraissant être une "projection".

Trois écritures sont nécessaires pour mettre ce diaporama en place. La première, à insérer entre les balises <HEAD>, en code source bien entendu :

<Script Language="Javascript"><!--
photo=new Array(5);
for (i=1;i < 5; i++)
{ spath="diapora/dia"+i+".jpg";
photo[i]=new Image();
photo[i].src=spath;
}
var projo1=1;
function projo(){
if(projo1>4){projo1=1;}
else{projo1++;}
document.$1.src="diapora/dia"+projo1+".jpg";
setTimeout("projo()",3333);
}
//--></script>

Voyons les éléments principaux de ce script :

en bleu, vous indiquerez le répertoire et le nom générique des images à afficher.

en vert, vous préciserez l'extension de ce groupe d'images (elles doivent toutes avoir la même extension !).

en rouge, vous indiquerez le nom de la fonction mais aussi celui destiné à réaliser la boucle d'appel des images.

vous remarquerez que la définition du 1er document à afficher doit reprendre ces différents éléments.

en fuchsia, vous pourrez modifier la temporisation d'affichage de chaque image.

toutes les images doivent avoir le même nom générique !

Faites fonctionner votre matière grise pour comprendre ... et modifier en conséquence ... la possibilité de mettre un nombre d'images plus ou moins important, selon vos besoins ou votre fantaisie.

Il faut maintenant appeler l'évènement. J'ai choisi le déclenchement automatique à l'ouverture de la page :

<BODY BACKGROUND="../valimage/astufond.jpg" onload="projo();">

en effectuant l'appel par un "onload" inséré dans la balise d'ouverture de corps de page <BODY>. J'ai laissé l'écriture de celui-ci telle qu'utilisée pour l'appel du fond de cet exposé : à vous de réaliser la modification en fonction de votre propre mise en page ...

Reste maintenant à choisir l'emplacement du diaporama ! Comment ? En écrivant la ligne classique d'appel d'objet à l'endroit où vous voulez voir son déclenchement :

<P><IMG SRC="diapora/dia1.jpg" WIDTH=320 HEIGHT=240 ALIGN=bottom name="$1"></P>

... qui doit, comme vous le remarquez, comporter l'adresse de la première image mais aussi la variable qui a été attribuée au document comportant les différentes définitions développées dans le JavaScript. Vous aurez certainement compris ... sinon je le précise : toutes les images doivent avoir la même dimension, celle que vous aurez réglé par les attributs adéquats : WIDTH et HEIGHT.

Voilà : vous pouvez maintenant passer à la réalisation de votre propre projection !

Ah, oui ... certains d'entre vous n'ont pas encore compris l'intérêt "secondaire" d'une telle écriture ! Voyons ... réfléchissez ... ! ... le format ".gif" ne fait-il pas actuellement l'objet de certaines interrogations quant à son "copyright" ? Ca y est : vous avez compris ! Le script que je vous propose ici va vous permettre de vous en passer si vous le voulez ... et par la même occasion vous économiser le prix d'un logiciel et de sa licence !

Cerises sur le gâteau ( car il y en a deux ! ) : non seulement le poids total des images et de l'écriture des scripts sont nettement plus légers que leur équivalent au format ".gif" mais, de plus, vous n'êtes plus limité à l'utilisation des 256 couleurs propres à ce format !

C'est chouette, non ?