Créer un diaporama sur son site internet

Pour créer un diaporama, il est bien sûr possible d'utiliser le format GIF, qui permet d'afficher et faire défiler plusieurs images. Mais ce format, destiné à des animations, n'est pas adapté pour compresser des images aussi complexes que des photos. Il est donc préférable d'utiliser des images fixes, compressées en jpg. Ensuite, pour les faire défiler, il suffit d'utiliser le javascript (de préférence) ou php. Deuxième avantage à l'utilisation d'un script : il vous sera possible d'affecter un lien différent à chaque image.

Diaporama javascript
Le diaporama en javascript a l'avantage de ne recharger que l'image. Le diaporama peut donc être placé n'importe où dans vos pages.
Inconvénient : les visiteurs ayant désactivé les script ne verront pas le diaporama.

Diaporama PHP
Concilié au HTML, PHP peut gérer l'affichage aléatoire des images. L'avantage est que ce diaporama fonctionnera même si l'active scripting est désactivé.
Inconvénient : toute la page doit être rechargée.

Préparer les images

Préparer les images, c'est tout simplement les optimiser pour internet (compression, rognage...). Nous ne traiterons pas de l'optimisation ici, qui est supposée assimilée. Si ce n'est pas le cas, voir dans la rubrique adéquate.

Diaporama en javascript

Des questions sur le script ? Posez les sur le forum !

Voici le script à insérer dans vos pages, dans l'en-tête (<head>) :

<!-- on crée d'abord des claques (layer 1 et layer 2) -->
<style type='text/css'>
#layer1 { position:absolute; top: 0; left: 0;
  width: 1; height: 1; z-index: 100; }
#layer2 { position:absolute; top: 0; left: 0;
  width: 1; height: 1; z-index: 200; }
</style>

<!-- puis le script qui va animer les images -->
<script language="Javascript">
pause  = 5; // détermine le temps de pause sur chaque image
vitesse  = 5; // puis la vitesse de défilement, que vous pouvez modifier

tabImg = new Array ("img1.jpg","img2.jpg","img3.jpg");
// inscrire ci-dessus l'URL de chaque image
// (ici, chaque image se trouve dans le même
// répertoire que la page).

tabImgn = new Array ("http://www.conseil-creation.com",
                     "http://www.esf-lille.com",
                     "img3g.jpg");
// inscrire ci-dessus les liens de chaque image.
// Vous pouvez mettre des liens de sites, des images...

function Navigateur(){
  if (navigator.appName.indexOf("Netscape") > -1)
    {return "Netscape";}
  if (navigator.appName.indexOf("Explorer") > -1)
    {return "Explorer";}
  return "Unknown";
}

function Initialise () {
  if (Navigateur()=="Netscape") {
    imgW  = document.images["img"].width;
    imgH = document.images["img"].height;
    obj = document.layer1;
    obj.top = document.images["img"].y;
    obj.left = document.images["img"].x;
    obj.clip.bottom = imgH;
    obj.clip.right = imgW;
    obj.clip.top = 0;
    obj.clip.left = 0;
    obj = document.layer1.document.layer2;
    objs = obj;
  } else {
    imgW  = document.all.img.width;
    imgH = document.all.img.height;
    obj = document.all.layer1;
    obj.style.top  = document.all.img.offsetTop;
    obj.style.left = document.all.img.offsetLeft;
    obj.style.clip = "rect (0px,"+imgW+"px,"+imgH+"px,0px)";
    obj = document.all.layer2;
    objs = obj.style;
  }
sens = 0;
cpt = 0;
changeImage ();
}

function ChangeImage () {
  var x,y;
  cpt++;
  if (cpt >= tabImg.length) { cpt=0; }
  if (sens == 0) { sens =1; } else { sens = 0 }
  x = 0; y = 0;
  if (sens==0) { position = y = imgH; }
    else { position = x = imgW; }
  objs.top = y; objs.left = x;
  Ecrire ('<A HREF="'+tabImgn[cpt]+'" TARGET="img">
  <IMG SRC="'+tabImg[cpt]+'" NAME="tabImg2" BORDER="0" ALIGN="Top"
  onLoad="InitDiapo ()"
  onError="setTimeout(\'ChangeImage()\',500);"></A>');
}

function Ecrire (str) {
  if (Navigateur()== "Netscape") {
    with (obj.document) { write(str); close();}
  } else {
    obj.innerHTML = str; }
}

function InitDiapo () {
  setTimeout ("slideSlide()",1000*pause);
}

function slideSlide () {
  position -= vitesse;
  if (position < 0) position = 0;
  if (sens==0) { objs.top = position; }
    else { objs.left = position; }
  if (position == 0) {
    document.images['img'].src = tabImg[cpt];
    if (Navigateur()=="Netscape") {
      eval('document.links[0].href="'+tabImgn[cpt]+'";');
  } else {
    eval('document.all.l.href="'+tabImgn[cpt]+'";'); }
  ChangeImage ();
  } else {
  setTimeout ("slideSlide()",50);
  }
}

</script>

Puis celui à insérer dans vos pages, dans le corps (<body>) :

<a href="http://www.conseil-creation.com" target="im" Name="l">
<img name="img" src="img1.jpg" border="0" align="top"></a>
<div id="layer1"><div id="layer2"></div></div>

Enfin, ajouter l'appel à la fonction dans la balise body : <body onload="Initialise()">

Diaporama en PHP

Voici donc le script pour un diaporama en php mais notez bien que ce script doit recharger toute la page (obligatoire, puisque PHP est un langage serveur). Donc si vous optez pour cette solution, la page ne devrait contenir que le diaporama.

Des questions sur le script ? Posez les sur le forum !

 <?PHP session_register("photo");

function display($rep,$niv) {
  global $photo;
  $dir = opendir($rep);

  if($niv>0) { // Lit les sous-dossiers
    while ($f = readdir($dir))
    if ($f!="." && $f!=".." && !is_file($rep."/".$f))
      display($rep."/".$f,$niv-1); // Script fini? On recommence...
      if($photo=="") display($rep,$niv);
  }

  while ($f = readdir($dir)) { // Photos du dossier courant
  if (is_file($rep."/".$f))
    if (strpos("jpeg.jpg.gif.bmp",substr($f,-4))) {
    // La photo en cours est-elle celle affichée ?
    // Si non : on affiche, si oui : suivante
      if($photo == $rep."/".$f) { $photo = ""; }
      else if ($photo == "")
      { $photo = $rep."/".$f; echo $photo; break; }
    }
  }

  closedir($dir);
} ?>

<HTML>
  <HEAD>
    <TITLE>Diaporama 1.0</TITLE>
    <META http-equiv="refresh" content="5">
  </HEAD>
  <BODY bgcolor=black><center>
    <TABLE><TR><TD align=right>
    <img src="<?PHP display(".",1); ?>"><br>
    <font size=1 color=white><? echo $photo; ?>
    </TD></TR></TABLE>
  </BODY>
</HTML>