Chapitre 52 : Eléments d'HTML dynamique

Dernière mise à jour	30 avril 1997	Auteur	Gilles Maire
Serveur	http://www.imaginet.fr/ime/dhtml.htm	Adresse	Gilles.Maire@UNGI.com

52.1 - Introduction

De façon formelle le langage HTML dynamique comprend les feuilles de styles que nous avons déjà étudiées au chapitre correspondant.

Par contre, sous l'impulsion de Netscape le langage HTML a vu apparaître avec la version 4 de son navigateur de nouvelles balises permettant de rendre des parties de page HTML mobiles, amovibles, en un mot dynamique.

Le positionnement dans un document peut se faire à l'aide des définitions de feuilles de style comme nous l'avons vu. Il peut en outre être mis en oeuvre par une nouvelle balise nommée : LAYER. Cette balise LAYER s'utilise dans le corps d'une page HTML, c'est à dire entre le couple de balise <BODY> </BODY>.

Cette balise permet de positionner une partie de code HTML et elle accepte en conséquence des arguments suivants :

ID : est l'identifiant de la balise LAYER
TOP : est son positionnement en pixels par rapport au haut de la fenêtre
LEFT : est son positionnement en pixels par rapport au bord gauche de la fenêtre
WIDTH : est sa largeur en pixels (WITDH="10") ou en pourcentage (WIDTH="10%")
HEIGHT : est sa hauteur en pixels (HEIGHT="10") ou en pourcentage (HEIGTH="10%")
POSITION : s'applique uniquement au LAYERS et non aux feuilles de style. La valeur de POSITION peut alors être relative ou absolute.
PAGEX : séparation en pixels entre le layer et le reste du document (horizontalement)
PAGEY : séparation en pixels entre le layer et le reste du document (verticalement)
SRC : donne le nom du fichier qui contient le code HTML à insérer dans le LAYER. Ceci permet par exemple de concaténer plusieurs fichiers HTML les uns à la suite des autres.
Z-INDEX : définit la position du layer sur la pile des layers, autrement dit son ordre. Sa valeur est un entier positif.
ABOVE : donne le nom du layer précédent dans la pile des layers.
BELOW : donne le nom du layer suivant dans la pile des layers.
CLIP="x1,y1,x2,y2" définit le rectangle en pixel servant à afficher le code HTML. Le code HTML dépassant la taille de se rectangle n'est pas affiché. Si les deux premières valeurs sont ommises, elles sont remplacées par 0. Les valeurs ne doivent pas contenir de caractère blanc. Si aucune valeur n'est spécifiée les valeur HEIGTH et WITDH sont prises en compte. Quand l'argument CLIP n'est pas présent, le code HTML est affiché dans tout le rectangle, si CLIP est spécifié le code HTML correspondant à la partie visible est affiché.
VISIBILITY=HIDE|SHOW|INHERIT signifie que le layer est masqué, visible ou qu'il hérite de l'attribut de son layer parent.
BGCOLOR : est sa couleur de fond exprimée en nom de couleur (blue) ou en valeur hexadécimale.
BACKGROUND : donne l'image utilisée pour la définition de la couleur du fond de page du Layer
OnMouseOver : voir le chapitre JAVASCRIPT
OnMouseOut : voir le chapitre JAVASCRIPT
OnFocus : voir le chapitre JAVASCRIPT
OnBlur : voir le chapitre JAVASCRIPT
OnLoad : voir le chapitre JAVASCRIPT

Entre un couple de balises HTML, il est possible de définir n'importe quel code HTML ou Javascript ; la partie du navigateur définie par la géométrie du LAYER sera donc utilisée pour visualiser ces informations.

La balise <ILAYER> permet de définir une portion de navigateur avec les mêmes caractéristiques que la balise LAYER mis à part que le positionnement sera relatif à la position de la balise et non plus absolu. En d'autres terme l'ajout d'une portion de code comprise entre un couple de balises ILAYER se fera à l'endroit ou la balise est appelée.

Le couple de balises <NOLAYER> </NOLAYER> affiche le code affiché si le navigateur ne comprend pas la balise <LAYER>

52.2 - Exemples d'utilisation des Layers

Modification d'une portion de page

Exemple

Ce texte est un code HTML très ordinaire qui correspond au message 1 Ici c'est le message 2 qui est affiché Cet exemple illustre bien l'intérêt des layers non ?

Sélectionnez un choix

Code HTML

<SCRIPT>
function CacheTousLayers() {
        document.message0.visibility = "hide";
        document.message1.visibility = "hide";
        document.message2.visibility = "hide";
        }

function ChangeLayer(n) {
        CacheTousLayers();
        document.layers["message" + n].visibility = "show";
}
</SCRIPT>

<ILAYER NAME="message0" LEFT=50 width=400 VISIBILITY=SHOW>Ce texte est un code <B>HTML</B> très ordinaire qui correspond au message 1
</ILAYER>
<LAYER NAME="message1" LEFT=50 width=400 VISIBILITY=HIDE>Ici c'est le message <I>2 </I>qui
est affiché</LAYER>
<LAYER NAME="message2" LEFT=50 width=400 VISIBILITY=HIDE>Cet exemple illustre bien l'intérêt
des layer non ?</LAYER>
<P>Sélectionnez un choix
<FORM NAME=Formulaire>
<SELECT NAME=MENU onChange="ChangeLayer(this.selectedIndex);return(false);">
<OPTION SELECTED>message1
<OPTION>message2
<OPTION>message3
</SELECT>
</FORM>

CacheTousLayers rend tous les layers invisibles par mise à la valeur hide de sa propriété visibility

ChangeLayer active la visualisation d'un layer

On affiche le premier Layer qui est déclaré
sous la forme d'un Layer relatif (ILAYER)

Les autres LAYER sont déclarés en absolu pour coïncider avec le premier

Sur un changement de choix du menu le layer correspondant au numéro de mesage est affiché.
On remarquera que les LAYERS sont bien la seule façon de modifier une partie de code HTML une fois que celui-ci est affiché.

Image mobile

Exemple

C'est le logo très énervant qui bouge sur la page :)

Code HTML

<SCRIPT LANGUAGE="javascript1.2">
                var x=5;
                var y=5;
//Libre de droit sous réserve d'utiliser les
//noms de variable UNGI :) et si possible le
//logo UNGI qui est la seule source de
//communication du site
        function BougeUngi() {
               var ungi = document.ungi;
                if (ungi.left > 600)
                 { x=-5 }
               if (ungi.left < 20 )
                 { x=5 }
               if (ungi.top > 2500)
                 {y=-5 }
               if (ungi.top < 2000)
                 {y=5 }
                ungi.offset(x,y);
               setTimeout("BougeUngi()", 25);
                return;
        }
</SCRIPT>

<LAYER NAME="ungi" LEFT=20 TOP=20>
<IMG SRC=gif/ungi.gif>
</LAYER>


x et y sont les pas de déplacement horizontal et vertical

BougeUngi est une procédure récursive qui n'est donc possible qu'en JavaScript 1.2
ungi est un objet désignant le layer

Le nom du layer est UNGI