DHTML ou le Html dynamique
Positionner avec Netscape
par la technique des couches [layer]
Home

La balise <LAYER>

Netscape propose depuis sa version 4.0, une technique pour positionner des éléments. C'est la technique des couches ou des "layers". On peut comparer ces layers aux transparents que l'on utilise avec les rétroprojecteurs.

La syntaxe est :

    <LAYER name="nom" left=x top=y> ... élément ... </LAYER>

La balise <LAYER> va demander au browser de réserver une sorte de petit rectangle - vide - ou une sorte de container dans lequel on va placer un élément, par exemple une image.

Il sera indispensable de donner un nom au "layer" lorsque plusieurs sont utilisés dans une même page ou un même document.

Les attributs "left" et "top" vont positionner cette zone par rapport au coin supérieur gauche de la fenêtre du browser. Top est la valeur en pixels du haut vers le bas et left, la valeur en pixels de la gauche vers la droite.

Le browser va afficher les layers et leur contenu quoiqu'il arrive! Idéal pour créer selon vos désirs des effets de superpositions. Idéal aussi pour avoir des superpositions inattendues...

La tag <LAYER> est un tag propriétaire de Netscape 4.0 qui n'a pas été repris par Microsoft. LAYER ne fonctionne donc pas sous Explorer 4.0 et uniquement sous Netscape.

Comme les feuilles de style qui permettent aussi de positionner des éléments, sont reprises et par Explorer 4.0 et par Netscape 4.0, cette dernière technique est recommandée pour des raisons de compatibilité.


 

Exemple

Pourquoi des couches? Tout simplement (les layers étant affichés quoiqu'il arrive), lorsque vous prévoyez plusieurs layers au même endroit, le premier qui apparaît dans le code, sera affiché directement. Le layer suivant viendra se mettre au-dessus et ainsi de suite. Le premier layer est donc celui qui sera "au fond" de l'écran par rapport autres. En jouant avec la transparence des images gif, on peut ainsi créer des effets surprenants.

Nous allons superposer les deux images suivantes :

<LAYER name="layer1" left=100 top=50>
<IMG SRC="dyna.gif" height=97 width=160>
</LAYER>
<LAYER name="layer2" left=110 top=75>
<IMG SRC="html.gif" height=41 width=83>
</LAYER>

La couleur verte a disparue car elle a la particularité gif d'être transparente.
Le positionnement au pixel près ne se fait pas sans tâtonnement et il faut souvent plusieurs essais avant d'arriver au résultat souhaité.

Le mouvement quant à lui est obtenu avec une bonne dose de Javascript en faisant varier les valeurs des attributs "top" et "left".

Home