Présentations d'images

Le plus grand ennemi de la fréquentation d’un site est souvent l’impatience du visiteur. C’est pourquoi il est conseillé de créer de petites pages, rapides à charger. Cette directive est parfois difficile à suivre. Je repense à l’exemple de ce marchand, qui ne pouvait pas faire autrement que d’insérer les photos de ses meubles sur ses pages Web. Malgré une subdivision draconienne et une diminution de la taille de ses images, le temps de chargement de ses pages restait trop élevé. Java script permet de trouver une solution à ce cas.

Le problème vient en grande partie du nombre d’images à charger. Pour le résoudre, il faut en afficher une seule et laisser l’initiative du choix au visiteur. Pour ce faire offrons lui une barre de navigation qui lui permettra de passer d’une image à l’autre. Pour une visite plus agréable, donnons lui aussi la possibilité de les faire défiler automatiquement les unes après les autres. Et enfin, s’il cherche un élément précis, affichons la liste de toutes les images.

Structure du site

La première page, donnant accès à tous les types d’articles, doit se trouver dans la racine principale. Chaque collection d’images à présenter doit posséder son propre répertoire qui contient la page de présentation. Les photos sont stockées sous le nom img0.jpg et les pages explicatives sous page0.htm.

Page de présentation

Une des disposition possible est la suivante : un tableau de 2 colonnes, dont la partie de gauche sert de barre de navigation et la partie de droite d’écran d’affichage.

Au travail

Commençons le document et donnons y un titre : Présentation

<html>
 <head>
    <title>Presentation</title>
    </head>

Au début du corps du document, introduisons nos routines Java scripte.

  

		<body>
        <script language="JavaScript">
           <!--Cacher à la lecture des anciens navigateurs
              var max = 4
		       var definition = new Array(max-1)
      			var ImageEnCours = 0
				var timeout = 0
				var Vitesse = 800

Nous aurons besoin des variables suivantes :

Max : le nombre d’images que l’on peut afficher.
Definition : tableau contenant les descriptifs.
ImageEnCours : numéro de l’image affichée.
Timeout : horloge pour le défilement.
Vitesse : Vitesse de défilement des images.

Le tableau a été défini : Array (max-1), car il ne faut pas oublier qu’un tableau commence par l’élément 0. Nous appliquons ce principe lors de la définition des noms à afficher :

 			definition[0]="Un"
			definition[1]="Deux"
			definition[2]="Trois"
			definition[3]="Quatre"

Affiche la liste des images

Pour construire la liste des images ou objets disponibles, il faut obtenir une ligne dans la page Html qui ressemble à :

<a href="#" onclick="ChargeImage(0);">Image 1</a>

Il faut donc écrire dans le document même :

  		function AfficheDefinitions()
  		  {
  				for (var i=0; i < max; i++) 
  		  		{
  		   			 	sp= "\""
  		    			s="<a href="+sp+"#"+sp+" onclick="+sp+"ChargeImage("+i+");"+sp+">" +definition[i]+"</a>"
  		    			document.write(s)
  		    			document.writeln("<br>")
        			}
     		 }

Charger une image

Nous arrivons au centre vital de la page, sans quoi rien ne fonctionnerait.

 		function ChargeImage(NumImage) 
  	 {
  		    document.images[0].src = "img" + (NumImage) +".jpg"
  		    document.links[max].href="page"+NumImage+".htm"
  		    document.links[max+1].href="page"+NumImage+".htm"
     }

L’objet Document, qui est en fait notre page, contient 2 objets qui nous seront très utiles : Images et Links. Notre page ne comprenant qu’une seule photo, nous savons que son index est 0. Pour changer l’image affichée, il suffit de modifier sa propriété scr, qui représente le chemin de l’image affichée. Comme il faut que les liens menant au descriptif complet de l’article pointe sur la bonne page, utilisons la table de liens de l’objet Document et modifions le routage. Dans notre exemple, l’avant dernier lien est celui de l’image et le dernier celui du texte situé juste en dessous.

Un peu de navigation

Le traitement des quatre boutons de navigation se fait simplement :

  		function PremiereImage() 
  		  {
  		    ImageEnCours=0
   		    ChargeImage(ImageEnCours)
  		  }
  		

  		function ImagePrecedente() 
  		  {
  		    ImageEnCours--
  		    if (ImageEnCours < 0) 
  		      {
  		        ImageEnCours = max-1
  		      }
  		    ChargeImage(ImageEnCours)
  		  }
  		

  		function ImageSuivante() 
  		  {
  		    ImageEnCours++
  		    if (ImageEnCours > max-1 ) 
  		      {
  		        ImageEnCours = 0
  		      }
  		    ChargeImage(ImageEnCours)
  		  }
  		  

  		function DerniereImage() 
  		  {
  		    ImageEnCours = max-1  
   		    ChargeImage(ImageEnCours)
  		  }

Il faut simplement être attentif au fait que la dernière image a toujours la valeur max-1 et que la première a comme valeur 0. Il ne faut pas non plus oublier, à chaque opération, de mémoriser la page affichée dans la variable ImageEnCours, particulièrement dans PremiereImage et dans DerniereImage. Ainsi lors de l’utilisation du défilement continu, la routine commencera par l’image suivante.

Défilement continu

Le défilement continu se fait tout simplement en affichant l’image suivante et en initialisant le timer avec la vitesse définie lors de l’initialisation des variables.

  		function ImageContinu() 
  		  {
  		    ImageSuivante()
  		    timeout = setTimeout("ImageContinu()", Vitesse)
  		  }
  		function Arret() 
  		  {
  		    clearTimeout(timeout)
  		  }
  	// -->
  	<script>

La page HTML

  <table border="0" width="500">
      	  <tr>
      	    <td width="150">
      	      <form method="POST">
      	         <p>
      	           <input type="button" name="defile" value="Défile" onClick="ImageContinu()"> 
      	           <input type="button" name="stop" value="Stop" onClick="Arret()"> 
      	         </p>
      	         <p>
      	           <input type="button" name="prem"  value="¦<" onClick="PremiereImage()">
      	           <input type="button" name="moins" value="<"  onClick="ImagePrecedente()">
      	           <input type="button" name="plus"  value=">"  onClick="ImageSuivante()">
      	           <input type="button" name="der"   value=">¦" onClick="DerniereImage()">
      	         </p>
      	       </form>
      	         <p>
      	           <br>
                     <script language="JavaScript"> 
                    	  AfficheDefinitions() 
                     </script>
      	           <br>
      	           <br>
      	           <br>
      	          </p>
      	        </td>
      	        <td>
      	          <p align="center">
                    <a href=""><img src="" border="0" width="200" height="100"></a>
      	            <br>
      	            <a href="">Voir le détails</a>
      	          </p>
      	        </td>
      	      </tr>
      	</table>
      	<script language="JavaScript">
      	   ChargeImage(0)
      	</script>
      </body>
    </html>

Cette dernière partie est plus précisément du HTM et de la mise en page. Deux éléments sont importants : AfficheDefinitions() et chargeImage(0) car ils complètent la mise en page et mettent en place les divers éléments.

Dernier mot

A vous d’utiliser cet exemple dans vos page Web. Mais n’oubliez pas deux choses : La référence aux images et aux liens peut varier. Si le logo de votre entreprise précède l’image d’affichage, l’index de cette dernière sera 1 et non plus 0.

L’exemple est utilisable, tel quel, pour 20 à 30 images à afficher. Si vous en avez plus, il faudra travailler avec deux frames, au lieu d’un tableau à deux colonnes. La méthode est la même, mais il faut tenir compte des cadres et subdiviser ces routines.

Essayez d’avoir des images de même dimension. Sur Internet Explorer, il est possible de ne pas tenir compte de la dimension de la première image chargée. Netscape, par contre, va adapter toutes les images à la taille de la première qui a été affichée. Alors attention aux déformations.

Mais vous n’êtes pas obligés d’être aussi sérieux avec ce source. Pourquoi ne pas l’adapter pour nous faire partager vos dernières photos de vacances.

Voir l'exemple

Toutes les heures, le serveur contrôle que votre site est en ligne. En cas de problème, un mail vous est envoyé.

Vous avez l'habitude d'oublier les dates importantes? Oubli vous prévient gratuitement par email !

Page modifiée le 17/06/2010

50 visiteur(s) aujourd'hui