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 :
 

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&egrave;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&eacute;</LAYER> 
<LAYER NAME="message2" LEFT=50 width=400 VISIBILITY=HIDE>Cet exemple illustre bien l'int&eacute;r&ecirc;t 
des layer non ?</LAYER> 

<P>S&eacute;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 
 
 


Haut Haut Suivant Sommaire Recherche Fenêtre Glossaire Nouveau Bientôt Courrier Souscription Aide Copyright