| Dernière
mise à jour |
30 avril 1997 |
Auteur |
Gilles Maire |
| Serveur |
http://www.imaginet.fr/ime/dhtml.htm |
Adresse |
Gilles.Maire@UNGI.com |
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>
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
| <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é.
|
C'est le logo très énervant qui bouge sur la page :)
| <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
|
