SELFHTML: HTML dynamique / Solutions pour la pratique / Livre d'images à feuilleter

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique

	Livre d'images à feuilleter
	Livre d'images à feuilleter - l'exemple

Livre d'images à feuilleter - l'exemple

Exemple d'affichage: aperçu

Dans cet exemple, plusieurs graphiques sont chargés en dynamique, mais il n'est toujours affiché qu'un seul à la fois. À l'aide de liens fléchés, l'utilisateur peut feuilleter en avant ou en arrière pour afficher le prochain graphique au même endroit que le précédent. Ce faisant, le nouveau graphique est "déroulé" de la gauche vers la droite. Certes, si de tels effets sont réalisables de manière beaucoup plus efficace avec l'Explorer Internet MS 4.x en utilisant les fondus enchaînés du filtre revealTrans, cet exemple-ci a l'avantage de fonctionner avec Netscape 4.x exactement de la même façon.

Remarque: Pour une meilleure orientation, l'exemple contient des liens aux explications correspondantes, par exemple: 1*. Ces liens ne font pas partie du code source. Dans le cas où vous copiez l'exemple dans un éditeur, vous devez effacer ces liens faute de quoi vous auriez des messages d'erreur JavaScript.

Exemple:

<html>
<head>
1* <script language="JavaScript">
<!--
var image = new Array(7);
image[0] = new Image(); image[0].src="soleil.gif";
image[1] = new Image(); image[1].src="lune.gif";
image[2] = new Image(); image[2].src="etoiles.gif";
image[3] = new Image(); image[3].src="feu.gif";
image[4] = new Image(); image[4].src="eau.gif";
image[5] = new Image(); image[5].src="air.gif";
image[6] = new Image(); image[6].src="terre.gif";
var montre = 0;
var largeuractuelle = 0;
var largeur = 289;
var vitesse = 20;

6* function feuilleter(direction)
{
 montre = montre + direction;
 if(montre > image.length - 1) montre = 0;
 else if(montre < 0) montre = image.length - 1;
 if(document.all)
 {
   document.all.lieuimage.style.clip = "rect(0 0 302 0)";
   document.all.lieuimage.innerHTML =
   "<layer width=289 height=302><img src=\"" + image[montre].src + "\"></layer>";
 }
 else if(document.layers)
 {
  document.layers[0].visibility = "hide";
  document.layers[0].document.open();
  document.layers[0].document.write("<img src=\"" + image[montre].src + "\">");
  document.layers[0].document.close();
  document.layers[0].clip.right = 0;
  document.layers[0].visibility = "show";
 }
 formeimage();
}

7* function formeimage()
{
 if(largeuractuelle <= largeur)
 {
  if(document.all)
    document.all.lieuimage.style.clip="rect(0 "+ largeuractuelle + " 302 0)";
  else if(document.layers)
    document.layers[0].clip.right = largeuractuelle;
  largeuractuelle = largeuractuelle + vitesse;
  window.setTimeout("formeimage()",0);
 }
 else
 {
  largeuractuelle = 0;
  if(document.all)
    document.all.lieuimage.style.clip="rect(0 " + largeur + " 302 0)";
  else if(document.layers)
    document.layers[0].clip.right = largeur;
 }
}
4* function Init()
{
 if(document.all)
  document.all.lieuimage.innerHTML =
  "<layer width=289 height=302><img src=\"" + image[0].src + "\"></layer>";
 else if(document.layers)
 {
  document.layers[0].document.open();
  document.layers[0].document.write("<img src=\"" + image[0].src + "\">");
  document.layers[0].document.close();
 }
}
// -->
</script>
</head>
3* <body bgcolor=#FFFFFF onLoad="Init()">

2* <div id="lieuimage" style="position:absolute; left:10px; top:140px;
padding:0px; clip:rect(0 289 302 0); visibility:show;">
<layer width=289 height=302></layer></div>

5* <div style="position:absolute; left:320; top:140; width:100; font-size:18pt;" width=100>
[<a href="javascript:feuilleter(-1)">&lt;&lt;</a>]
[<a href="javascript:feuilleter(1)">&gt;&gt;</a>]
</div>

</body>
</html>

Explication:

Pour que l'exemple du livre d'images à feuilleter fonctionnent proprement il faut qu'à la lecture du fichier HTML, tous les graphiques qui doivent être affichés au cours du feuilletage, soient également lus. Car ce n'est seulement que si les graphiques sont déjà à cet instant dans la mémoire de travail qu'il n'y a pas de problèmes de synchronisation.
La lecture des graphiques concernés se fait dans le passage JavaScript qui est noté, dans l'exemple, dans l'entête de fichier (1*). D'abord est défini un nouvel array comportant autant d'éléments que le livre d'images comporte d'images. Dans l'exemple ci dessus, il y a 7 variables image, adressables avec image[0] jusqu'à image[6]. Ces variables sont tout d'abord abstraites, on peut y sauvegarder ce qu'on veut. Dans l'exemple est sauvegardé dans chaque variable un nouvel objet image. À l'objet Image respectif, créé à cette fin, est affecté un fichier graphique au choix par la propriété src.

Suite à quoi sont encore définies quelques variables globales qui seront nécessaires plus tard.

Dans le corps du fichier HTML de l'exemple, deux passage <div> sont définis (2*). Le premier passage <div>est prévu pour afficher le graphique actuel. Le deuxième passage contient des liens à l'aide desquels l'utilisateur peut feuilleter en avant ou en arrière parmi les graphiques. Les deux passages <div> sont positionnés de façon absolue à l'aide des mentions de feuilles de style correspondantes.

Le premier passage <div> a pour contenu un passage <layer>, prévu spécialement pour Netscape. Cette forme d'imbrication s'est révélée praticable. Car l'Explorer Internet MS ignore le repère <layer>. Netscape par contre interprète d'abord le repère <div>, pour se réjouir ensuite du repère <layer> intérieur, avec lequel il parvient mieux au HTML dynamique.

Dans le passage d'affichage pour les graphiques n'est tout d'abord rien affiché. Le chargement du premier graphique se fait déjà de manière dynamique à l'aide de JavaScript. La commande de départ pour cela figure dans le repère d'ouverture <body>. Là est appelée la fonction Init() à l'aide de l' Event-Handler onLoad (3*). La fonction Init() affiche le premier graphique dans le passage prévu à cet effet (4*). À cet endroit est recherché, comme d'habitude par une requête de l'objet disponible (document.all pour l'Explorer Internet MS ou document.layers pour Netscape), de quelle façon l'insertion dynamique doit se faire. Pour l'Explorer Internet MS, le code HTML pour incorporer le premier graphique est simplement écrit en dynamique avec la propriété innerHTML de l'objet nommé lieuimage. En le faisant il faut aussi réécrire le repère <layer> - sinon il serait perdu. Pour Netscape, le layer (qui pour Netscape représente un document dans le document) reçoit son contenu à l'aide de document.write(). Il est très important de noter d'abord document.open() ainsi qu'à la fin document.close(), faute de quoi rien ne fonctionnerait.

Feuilleter entre les différents graphiques s'effectue par par les deux liens du deuxième passage <div>. Les deux liens appellent la même fonction nommée feuilleter() (5*), mais avec une différence dans le paramètre transmis. Le lien vers l'avant transmet 1, le lien vers l'arrière transmet -1. Ainsi, la fonction feuilleter() peut utiliser aussitôt ce paramètre pour gérer.

La fonction feuilleter() demande dans un premier temps si soit la première soit la dernière image de la série est atteinte et fixe à nouveau, selon le cas, la dernière ou la première image comme image à afficher (6*). On parvient ainsi à un effet sans fin pour l'utilisateur qui feuillette. Suite à quoi - de façon similaire à la fonction Init() et encore par la requête en disponibilité de document.all ou de document.layers - le contenu du passage d'affichage pour l'image est réécrit, et cela avec la nouvelle image. Après quoi, la fonction formeimage() est appelée.

La fonction formeimage() est responsable, lors de l'affichage du nouveau graphique, de l'effet de déroulement dynamique (7*). Pour ce faire la propriété clip est utilisée, en fonction toutefois du navigateur. Pour l'Explorer Internet MS (embranchement document.all), la mention de feuille de style concernant clip est réécrite dynamiquement, et ce de telle sorte que la variable largeuractuelle, qui est continuellement incrémentée de la valeur de la variable globale vitesse, donne l'impression d'un déroulement vers la droite. Pour Netscape (embranchement document.layers), la propriété clip.right de l'objet layers concerné est simplement modifiée en dynamique de la valeur de largeuractuelle.
Après la modification de valeur du bord droit du clip, la fonction formeimage() s'appelle à nouveau elle-même. Ceci se fait par window.setTimeout(), afin d'éviter une erreur récursive.
À la fin, quand la plus haute condition if de la fonction feuilleter() est remplie, à savoir que la largeur actuelle est plus grande que la largeur d'affichage du graphique, la fonction aboutit dans l'embranchement else. C'est alors qu'est fixée la valeur du clip pour la droite sur la valeur finale - et la procédure pour feuilleter est terminée.


après:	CGI et HTML
avant:	Éléments de page pouvant être déplacés

SELFHTML/Quickbar HTML dynamique Solutions pour la pratique