DHTML

Introduction au HTML dynamique

Initialisation et propriétés des objets en DHTML - Les styles des objets ou CSS-P layer

Comment initialiser les propriétés d’un objet ou « layer » en DHTML et positionner les objets dans un document HTML. Le DHTML ? LE HTML dynamique n’est pas une technique ou un langage en soit, c’est plutôt un concept qui permet, à l’aide de langage « script » comme le Javascript, de manipuler les objets d’un document après que celui-ci a été chargé par le navigateur. Le langage « script » peut accéder et manipuler les objets ou « layers » selon la structure DOM ou « Document Object Model ».

La première étape consiste à créer un objet ou un " layer " aussi appelé " CSS-P layer ". L’objet peut être n’importe qu’elle code HTML, du texte, une image ou une combinaison de code HTML dans une table par exemple. Pour identifier l’objet il suffit de l’inclure entre les balises DIV et pour que le Javascript puisse l’identifier afin de le manipuler, il faut lui donner un nom ou un identifiant. Un " layer " peut en contenir un autre, on dit alors du premier qu’il est le parent du second.

Exemple d’un " layer " simple
<div id="nomobjet">contenu</div>

Vous n’avez même pas besoin d’indiquer un contenu car il peut être déterminé dynamiquement en Javascript après le chargement de la page. Vous avez aussi la possibilité de déterminer à l’avance les propriétés de l’objet comme sa position ou sa visibilité. Cette technique est intéressante puisqu’elle vous permet ensuite de manipuler l’objet en Javascript, c’est à dire de modifier le contenu, le style comme la couleur, l’espacement, la police. Vous pouvez aussi modifier la position de l’objet, le déplacer automatiquement ou aléatoirement, à l’aide de la souris, de faire défiler un texte etc.

Bien que vous puissiez déterminer les propriétés de l’objet dynamiquement en Javascript, vous pouvez aussi les déterminer directement dans la déclaration de l’objet. Noter que si vous utilisez une position " absolute ", l’objet sera affiché par rapport à l’endroit où vous ajouter le code dans votre page HTML.

Exemple
<div id="nomobjet" style="position:absolute; z-index:2; visibility:visible; left:1; top:1">contenu</div>

Propriété ou style d’un objet

* left, top, width et height peuvent être initialisés d’après le standard CSS soit : pixels - px, points - pt, pouces - in , et en pourcentage - %. Par défaut la position est en pixel, il faut noter que Netscape 4.x gère très mal les px, pt, in et %.

Position "absolute"
La position d’un objet "absolute" est basée sur la distance le séparant du coin supérieur gauche du document ou de la window. Indépendamment de la grandeur de la fenêtre, des éléments de votre document ou des tables. Un objet initialisé avec un positionnement "absolute" peut être placé n’importe où sur votre document mais aussi perdu hors de la fenêtre.

Position "relative"
La position d’un objet "relative" est basée sur le coin supérieur gauche de son "parent". Par exemple, une objet (DIV) déclaré dans une table sera positionnera selon la position dans le document de cette dernière. Le positionnement "relative" cause énormément de problèmes dans sa manipulation Javascript avec Netscape 4.x. Lire à ce sujet "Bugs et compatibilité du DHTML"

Overflow
Par défaut l’ "overflow" est à "clip" c’est-à-dire que la section du contenu, plus large que les dimensions de l’objet, sera tout simplement ignorée sans être affichée. Mais vous pouvez déterminer que le contenu s’affiche en dehors du "DIV" avec "none" ou d’ajouter des barres de défilement avec "scroll".

Valeurs de "Overflow"
- Overflow : clip = ignorer le contenu qui sort de l’espace (par défaut)
- Overflow : none = afficher le contenu hors de l’espace
- Overflow : scroll = ajouter des barres de défilement pour voir le contenu extérieur.

Feuille de style (CSS)
Les propriétés peuvent aussi être déterminées par une feuille de style (CSS) c’est pourquoi on nomme aussi les propriétés "style". Cette technique est conseillé si vous désirez un code compatible Netscape 4.x. Les propriétés déterminées "on-line" ne sont pas conseillées pour Netscape 4.x.

Exemple

<style>
.nomobjet {
  background: #FFFFFF;
  color: #000000;
  border: medium inset;
  position: absolute;
  top : 1px;
  left: 1px;
  width: 250px;
  height: 250px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 8pt;
  visibility: hidden;
}
</style>

Il faut identifier ensuite l’objet à ce style
<div class="monObjet" id="nomobjet">contenu</div>

Maintenant que vous pouvez initialiser vos objets et les placer sur une page HTML, il ne reste qu’à utiliser le Javascript pour manipuler ces objets dynamiquement. Voir les tutoriels "Modifier la visibilité des objets en DHTML", "Modifier le contenu et la position des objets en DHTML"... Sans oublier de lire "Bugs et compatibilité du DHTML"