| 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>
<ILAYERNAME="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
|
