DHTML - La notion de couche

Dynamic HTML (DHTML)
DHTML
Les couches
Animation
A lire aussi
HTML
CSS
Javascript
PHP
AJAX
RSS
Podcast
Webmastering
Nom de domaine
Hébergement
Référencement

Qu'est-ce qu'une couche?

Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des "couches" contenant des éléments et pouvant être positionnées sur l'écran. Il s'agit en réalité de balises HTML spéciales pouvant contenir elles-mêmes d'autres balises HTML, et dont les attributs sont entre-autres :

La position par rapport au haut du navigateur
La position par rapport à la bordure gauche du navigateur
La largeur
La hauteur
Le Z-Index, c'est-à-dire le niveau de superposition de la balise

En effet, on appelle ces conteneurs HTML "couches" car il s'agit d'éléments HTML pouvant être superposés à l'écran comme des carrés de papier calque et pouvant être déplacés séparément (chaque calque est repéré par un identifiant unique que l'on définit comme attribut) dans la fenêtre du navigateur grâce à du Javascript. De plus, le z-index définit l'ordre de superposition des calques, c'est-à-dire quel calque se trouve au-dessus des autres...

Les balises DIV, SPAN et LAYER

Les balises permettant de constituer des couches sont les balises LAYER, SPAN et DIV.

La première (LAYER) est une balise spécifique à Netscape Navigator, et dont le fonctionnement est très proche de celle énoncée ci-dessus, c'est-à-dire la superposition de transparents (layer signifie justement couche). Les balises DIV et SPAN sont plus génériques mais sont toutefois mieux supportées par Internet Explorer que Netscape Navigator

La balise LAYER

La syntaxe de la balise LAYER est la suivante :

<LAYER NAME="Nom de la couche" LEFT="Distance au bord gauche" TOP="Distance au haut">

éléments HTML
</LAYER>

Ainsi, le positionnement de deux images superposées sous Netscape Navigator (version 4 ou supérieure) peut se faire de la manière suivante :

<LAYER NAME="IMG1" LEFT="20" TOP="30">

<IMG SRC="image.gif">

</LAYER>

<LAYER NAME="IMG2" LEFT="25" TOP="35">

<IMG SRC="image2.gif">

</LAYER>

Les balises DIV et SPAN

Avec Internet Explorer (versions 4 et supérieures), le positionnement des éléments se fait selon le concept des CSS-P, au moyen des balises DIV et SPAN. Etant donné que le navigateur Internet Explorer 4 est apparu après Netscape Navigator 4, les possibilités "dynamiques" qu'il offre sont plus vaste que celles de Netscape, c'est-à-dire qu'il offre plus d'attributs au niveau de ses balises, pouvant être modifiées par l'intermédiaire d'un code écrit en Javascript après chargement de la page (d'où la notion de HTML dynamique).
Le positionnement grâce aux balises DIV et SPAN est expliqué en détails dans la section HTML 4.0

Avec les balises DIV et SPAN, le positionnement peut se faire de deux façons :

Le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).
Le positionnement relatif se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

La syntaxe des balises DIV/SPAN est la suivante :

<DIV style="position: absolute; top: 99 px;
left: 99 px; visibility : visible;z-index : 2;">

éléments HTML
</DIV>

Récapitulatif des attributs des balises

Balise Propriété Valeur Description

LAYER name Chaine de caractère Définit un identifiant unique pour la couche

left valeur numérique entière distance en pixel à la bordure gauche

top valeur numérique entière distance en pixel au haut de la page

DIV et SPAN position static
absolute
relative
Aucun mouvement par rapport au document
positionnement par rapport au document
par rapport à l'élément précédent

left auto
valeur numérique entière
valeur en pourcentage (%)
distance à la bordure gauche automatique
distance à la bordure gauche en pixels
distance à la bordure gauche en pourcentage

top auto
valeur numérique entière
valeur en pourcentage (%)
distance au sommet automatique
distance au sommet en pixels
distance au sommet en pourcentage

width auto
valeur numérique entière
valeur en pourcentage (%)
largeur automatique
largeur de l'élément en pixels
largeur de l'élément en pourcentage

height auto
valeur numérique entière
valeur en pourcentage (%)
hauteur automatique
hauteur de l'élément en pixels
hauteur de l'élément en pourcentage

overflow visible
hidden
auto
scroll
affiche le contenu même s'il est trop grand
cache le contenu superflu
automatique
affiche des barres de défilement

clip auto
bottom
left
right
top
découpage automatique
découpage en bas
découpage à gauche
découpage à droite
découpage en haut

visibility inherit
hidden
visible
visibilité par défaut
caché
visible

z-index auto
valeur numérique entière
superposition automatique
valeur indiquant la profondeur

Discussions pertinentes trouvées dans le forum

22/07 14h00	Exécuter un script dhtml dans une page .php ?	Webmastering	22/07 15h47->Erdnax	17
03/11 00h27	Mon player audio DHTML : qu'en pensez_vous ?	Développement	04/11 16h20->Marden	10
28/04 14h09	DHTML / Javascript	Windows	29/04 16h15->Aki75	10
09/04 17h11	Menu Dhtml -> cadre	Windows	12/04 13h11->ipl	9
15/05 14h10	Acces .dll a partir de VBScript [DHTML]	Développement	16/05 10h49->teebo	6
10/04 12h00	DHTML ou XML	Développement	17/04 14h41->dje-dje	5
23/04 15h21	retrouver adresse Email ( DHTML)	Développement	24/04 12h08->driss	4
19/06 12h28	[DHTML]Probleme de layers	Développement	21/06 10h13->esox_ch	4
23/04 15h20	comment retrouver adresse Email ( DHTML)	Windows	21/01 10h24->charles	3
26/04 11h50	dhtml string->variable	Développement	26/04 13h14->teebo	3
Discussion fermée Problème résolu		Plus de discussions sur « DHTML »