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

SELFHTML/Aides à la navigation

HTML dynamique

Solutions pour la pratique

Livre d'images à feuilleter

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

Il y a des pages sur lesquelles vos visiteurs veulent voir des images. Si par exemple, vous discourez sur une ville ou sur un pays ou sur une réunion entre amis, les visiteurs désireront en voir des images. L'exemple présenté ici montre comment il est possible de présenter de telles images de façon différente. Sans faire défiler beaucoup et sans devoir appeler d'autres pages, l'utilisateur peur feuilleter les images disponibles vers l'avant ou vers l'arrière. Pour que la construction de l'image sorte de l'ordinaire, une espèce "d'effet de rideau" a été intégré. Les images ne sont pas simplement affichées mais "dévoilées".

Texte source avec explications

L'exemple montre un fichier HTML complet avec le livre d'images.

Le fichier dhtml.js, qui contient les fonctions de la bibliothèque DHTML doit être doit être disponible et se trouver dans l'exemple, dans le même répertoire que le fichier HTML.

Exemple:

Exemple d'affichage: aperçu ( bibliothèque DHTML)

<html><head><title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
<!--
var image = new Array();
image[0] = new Image(); image[0].src="livreimages01.gif";
image[1] = new Image(); image[1].src="livreimages02.gif";
image[2] = new Image(); image[2].src="livreimages03.gif";
image[3] = new Image(); image[3].src="livreimages04.gif";
image[4] = new Image(); image[4].src="livreimages05.gif";

var affiche = 0;
var largeur = 300;
var largeur_actuelle = 0;
var ampleur_pas = 6;
var delai_pas = 1;

function feuilleter(direction) {
 affiche = affiche + direction;
 if(affiche > image.length - 1) affiche = 0;
 else if(affiche < 0) affiche = image.length - 1;
 if(DOM || MS)
   getElem("id","passage_image",null).style.clip="rect(0 0 225 0)";
 if(DOM && !MS && !OP) {
   var img = document.createElement("img");
   var src = document.createAttribute("src");
   src.nodeValue = image[affiche].src;
   img.setAttributeNode(src);
   getElem("id","passage_image",null).replaceChild(img, getElem("id","passage_image",null).firstChild);
 }
 else if(MS) {
   document.all.passage_image.innerHTML = "<img src=\"" + image[affiche].src + "\">";
 }
 else if(NS) {
   getElem("index",0,null).visibility = "hide";
   setCont("index",0,null,"<img src=\"" + image[affiche].src + "\">");
   getElem("index",0,null).clip.right = 0;
   getElem("index",0,null).visibility = "show";
 }
 construire_image();
}

function construire_image() {
 if(largeur_actuelle <= largeur) {
  if(DOM || MS && !OP)
    getElem("id","passage_image",null).style.clip="rect(0 "+ largeur_actuelle +" 225 0)";
  else if(NS)
    getElem("index",0,null).clip.right = largeur_actuelle;
  largeur_actuelle = largeur_actuelle + ampleur_pas;
  window.setTimeout("construire_image()", delai_pas);
 }
 else {
  largeur_actuelle = 0;
  if(DOM || MS)
    getElem("id","passage_image",null).style.clip="rect(0 "+ largeur +" 225 0)";
  else if(document.layers)
    getElem("index",0,null).clip.right = largeur;
 }
}

function initialiser_page() {
 if(DOM && !MS && !OP) {
   img = document.createElement("img");
   var src = document.createAttribute("src");
   src.nodeValue = image[0].src;
   img.setAttributeNode(src);
   getElem("id","passage_image",null).appendChild(img);
 }
 else if(document.all)
   document.all.passage_image.innerHTML = "<img src=\"" + image[0].src + "\">";
 else if(NS)
   setCont("index",0,null,"<img src=\"" + image[0].src + "\">");
}
//-->
</script>
<style type="text/css">
<!--
#passage_image {
 position:absolute; left:10px; top:140px; padding:0px; clip:rect(0 300 225 0); visibility:show; }
#passage_navigation {
position:absolute; left:320; top:140; width:100; font-size:18pt; }
 -->
</style>

</head>
<body bgcolor="#FFFFFF" onLoad="initialiser_page()">

<div id="passage_image">
</div>

<div id="passage_navigation">
[<a href="javascript:feuilleter(-1)"><b><<</b></a>]
[<a href="javascript:feuilleter(1)"><b>>></b></a>]
</div>

</body>
</html>

Explication:

Dans le corps du fichier HTML de l'exemple, deux passages div sont définis. Le premier passage est <div> conçu pour l'affichage du graphique actuel. Le deuxième passage contient les liens permettant à l'utilisateur de feuilleter parmi les graphiques vers l'avant ou vers l'arrière. Les deux passages sont positionnés de façon absolue à l'aide de propriétés CSS correspondantes. Les définitions CSS correspondantes figurent dans un passage style de l'entête de fichier et se réfèrent aux noms Id des passages.

Le fichier d'exemple contient en outre deux passages JavaScript dans l'entête de fichier. Dans le premier passage JavaScript vide est incorporée la bibliothèque de fonctions. Dans le repère d'ouverture <body> est appelée comme d'habitude la fonction DHTML_init() de la bibliothèque DHTML incorporée pour initialiser celle-ci. En outre, la fonction initialiser_page(), notée dans le passage JavaScript de l'entête de fichier, est appelée. Cette fonction fait en sorte que la première image soit affichée.

Pour que l'exemple du livre d'images à feuilleter fonctionne proprement, il e passe toutefois déjà quelque chose avant. Dès la lecture du fichier, donc hors de toute fonction, Le code JavaScript noté au début du deuxième passage JavaScript est exécuté. Là tous les graphiques qui doivent être affichés quand le livre est feuilleté, sont déjà lus. Car ce n'est que si les graphiques se trouvent déjà à cet instant dans la mémoire de travail, qu'il n'y aura pas de problème de synchronisation. À cet effet est mis en œuvre l'objet JavaScript images . D'abord est créé un nouveau tableau vide. Ensuite, le tableau est rempli d'objets graphiques. Le fichier graphique désiré est affecté par la propriété src, à l'objet Image respectif créé à cet effet.

Enfin sont encore définies quelques variables globales qui seront nécessaires plus tard.

La fonction initialiser_page() affiche ensuite, après son appel, le premier graphique dans le passage d'affichage prévu. Ici encore bien du travail de différenciation est nécessaire, pour servir les différents navigateurs et leurs modèles DHTML. Le modèle DOM ne peut dans ce cas provisoirement pas encore être appliqué pour l'Explorer Internet, étant donné que celui-ci ne soutient pas encore tout au moins dans sa version 5.x, la création de nœuds attributs d'après la syntaxe du modèle DOM. Avec la requête if(DOM && !MS && !OP) L'Explorer Internet mais aussi Opera sont exclus du traitement d'après le modèle DOM. Seul Netscape 6.x est concerné par ce passage. Là est créé et arrangé le code HTML pour la nouvelle image avec les fonctions createElement() et createAttribute() de l'objet document . L'Explorer Internet par contre aboutit dans l'embranchement qui commence par else if(MS). Là, il est fait usage de la méthode pratique innerHTML de l'objet all, pour arranger le code HTML souhaité. Enfin, il reste encore Netscape 4.x qui aboutit dans l'embranchement else if(NS) et qui reçoit le graphique reconstitué avec la fonction setCont() de la bibliothèque DHTML. Vous pouvez voir clairement à cet exemple, à quel point la distinction entre les navigateurs et les modèles DHTML est souvent pénible. Vous pouvez voir par ailleurs que le modèle DOM avec tous ses avantages est quelquefois aussi d'un usage très compliqué. Une méthode comme innerHTML de l'objet all n'existe pas dans le modèle DOM parce qu'avec ce modèle, les nouveaux nœuds doivent être créés et formés strictement d'après les règles du langage de marquage. Actuellement Opera n'est pas encore en mesure de modifier des contenus de façon dynamique et est ici complètement exclus.

Feuilleter entre les différents graphiques est provoqué par les deux liens du deuxième passage div. Les deux liens appellent la même fonction nommée feuilleter() en lui transmettant cependant des paramètres différents. Le lien vers la page suivante transmet 1, le lien vers la page précédente -1. Par ce biais, la fonction feuilleter() peut utiliser ce paramètre d'emblée pour gérer la lecture.

La fonction feuilleter() demande d'abord si soit la première image, soit la dernière image de la série est atteinte et fixe à nouveau dans l'affirmative la dernière ou la première image comme étant celle à afficher. On parvient ainsi à un effet sans fin pour l'utilisateur qui feuillette. Enfin le contenu du passage d'affichage pour l'image est réécrit pour la nouvelle image et cela avec la nouvelle image. Ici à nouveau, il faut faire cette distinction pénible entre les propriétés des navigateurs comme dans la fonction initialiser_page(). À la fin est ensuite appelée la fonction construire_image().

La fonction construire_image() est responsable, lors de l'affichage du nouveau graphique, de l'effet de déroulement dynamique. Pour ce faire la propriété CSS clip est utilisée. Pour la fixer, la fonction de base getElem() de la bibliothèque HTML peut être utilisée pour l'accès à l'élément. Néanmoins, l'appel pour Netscape 4.x est différent de l'appel pour les autres navigateurs, raison pour laquelle, à nouveau; un aiguillage if-else est nécessaire. Après la modification du bord droit de l'image la fonction construire_image() s'appelle elle-même et cela dans window.setTimeout(). Ici interviennent les variables ampleur_pas et delai_pas qui sont notées au début du passage script. Essayez donc d'autres valeurs pour les affectations de valeurs de départ.
À la fin, quand la condition If du haut dans la fonction construire_image() est remplie, à savoir que la largeur actuelle est plus grande que la largeur d'affichage du graphique, la fonction aboutit dans l'embranchement else. La, la valeur clip pour la droite est fixée sur la valeur finale et la procédure pour feuilleter est terminée.


	CGI et HTML
	Affichage de la date et de l'heure

SELFHTML/Aides à la navigation

HTML dynamique

Solutions pour la pratique