La notion de couches
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 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 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>
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>
| 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
|
La notion de couches
 Le Principe
|
L'animation des éléments présents sur une page Web se fait en modifiant
leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en
utilisant leur méthodes (fonctions associées à un élément).
Cela ne peut se faire qu'à l'aide d'un code Javascript,
permettant de modifier les propriétés des éléments suite à
des événements utilisateurs (clic sur la souris, déplacement de la souris, ...),
et cela grâce à une structuration des éléments dans la page définie
par le DOM (Document Object Model).
Le Document Object Model est un principe consistant à représenter
le navigateur et le document qui y est affiché comme une hiérarchie d'objets
(voir éventuellement la section programmation orientée
objet pour comprendre le concept objet), possèdant des propriétés intrinsèques
et auxquels ont peut accéder en décrivant la hiérarchie qui mène à chaque
objet.
Toutefois, le Document Object Model ayant été implémenté de manière
"sauvage" dans les deux navigateurs concurrents (ie Netscape et Internet Explorer),
la hiérarchie et les propriété diffère quelque peu entre les deux browsers.
|
Les propriétés modifiables
|
Selon que l'on utilise Internet Explorer ou Netscape, la façon
d'accèder aux propriétés des éléments est différente,
ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps
de déterminer par l'intermédiaire du script le type de navigateur utilisé,
puis adapter la notation en fonction...).
- Netscape permet d'accéder aux différents layers en utilisant la syntaxe suivante:
document.layers['nom'].document.layers['nom2'].attribut
ou
document.layers.nom.document.layers.nom2.attribut
- Internet Explorer définit un objet appelé "all" contenant
tous les éléments DIV. Ainsi, l'accès aux éléments se fait par la syntaxe
suivante:
document.all.nom.attribut
Voici un petit aperçu des actions réalisables en DHTML et la façon
de les effectuer sur les deux navigateurs:
| Action |
Netscape Navigator |
Internet Explorer |
| Modifier l'image de fond |
document.layers.nom.background |
document.all.nom.style.backgroundImage |
| Modifier la couleur du fond |
document.layers.nom.bgColor |
document.all.nom.style.backgroundColor |
| Modifier le clipping |
document.layers.nom.clip |
document.all.nom.style.clip |
| Modifier le contenu |
document.layers.nom.open();
document.layers.nom.writeln(); |
document.all.nom.innerHTML |
| Modifier la distance à gauche |
document.layers.nom.left |
document.all.nom.style.left |
| Accéder au nom |
objet.name |
objet.id
objet.name |
| Modifier la visibilité |
document.layers.nom.visibility |
document.all.nom.style.visibility |
| Modifier la distance au haut |
document.layers.nom.top |
document.all.nom.style.top |
| Modifier le z-index |
document.layers.nom.zIndex |
document.all.nom.style.zIndex |
