Diapo 7

Diapo 7

Un diaporama est une présentation d'images, dans notre cas, qui peut soit:

- tourner tout seul avec ou sans arrêt possible de l'animation.

- présenter des images à animer au clic ou au survol, directement ou par l'intermédiaire de boutons ou vignettes.

Pour le moment, je ne vois que ces possibilités...

Faire tourner un diaporama sans intervention du visiteur me semble être devant la télévision, ce qui n'est pas mon choix.

En ajoutant un arrêt de l'animation, c'est déjà plus "participatif" et permet au visiteur de s'arrêter sur les images qui l'intéressent.

Présenter un ensemble d'images en vignettes, par exemple, permet au visiteur de visualiser celles qu'il remarque, au survol ou au clic.

Le clic a un inconvénient et un avantage: il faut une action pour animer l'élément et une action pour le faire revenir à l'état premier.

Le survol a un inconvénient et un avantage: il faut maintenir le curseur sur l'élément pour l'animer; en sortir fait revenir l'élément à l'état premier.

Nous avons donc le choix de la commande; reste ensuite, l'animation proprement dite.

La plupart du temps, nous voyons des diaporamas par défilement mais d'autres façons de faire sont possibles (agrandissement, opacité, rotation...)

D'autre part, le ratio (rapport largeur/hauteur) de vos images est souvent: 4/3 (ancienne taille des écrans télévision) et 16/9 (plus panoramique) et toutes les variantes approchantes; ceci demande donc d'adapter les codes pour le ratio de vos images.

Vous avez donc le choix dans la création de votre diaporama; en voici un par agrandissement central, avec arrêt au survol, en 4/3 ... pourquoi pas !

Cependant, le code peut paraître compliqué, car il faut une animation particulière pour chaque image, mais répétitif. Ne changez que les adresses des images...

<div style="position: relative; margin: 30px auto; width: 1000px; height: 750px; border: 6px ridge white; box-shadow: 4px 4px 6px black; text-align: left;">
<p id="bb0"> </p>
<img id="bb1" src="http://ekladata.com/sW3RjzIHsaAu6SZ0WjqhBb7iSC0@1000x750.jpg" alt="" />

<img id="bb2" src="http://ekladata.com/Ol4R38pmU247NQf0S_uzWyF-eeU@1000x750.jpg" alt="" />

<img id="bb3" src="http://ekladata.com/QOo2nGPrY1zruHUpkT9lqxtQvzc@1000x750.jpg" alt="" />

<img id="bb4" src="http://ekladata.com/kYABWGTLj2GrgFMGpxyvZj38p2g@1000x750.jpg" alt="" />

<img id="bb5" src="http://ekladata.com/sp-ahKXyKzgTOS6F9Jm5sgTLu-g@1000x750.jpg" alt="" />

<img id="bb6" src="http://ekladata.com/VUWl6XIaWvqlZTA3OJAvFnVhm0g@1000x750.jpg" alt="" /></div>
<style></style>