Trucsweb.com

DHTML

Introduction au HTML dynamique

RDFFav

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...initialisation propriétés objets dhtml styles css-p layers structure dom document object model div parent id div visibilité couleur espacement police position:absolute relative z-index visibility visible left top hidden width height overflow

  • · Niveau : DÉBUTANT
  • · Compatibilité : IE 4+, NS 4+ et Netscape 6

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

id

le nom de l’objet pour manipulation futur.

z-index

détermine sa position par rapport aux autres objets. En dessous ou par-dessus. Plus l’index est petit et plus il se retrouvera en dessous des autres objets ayant un " z-index " plus grand.

visibility

la visibilité de l’objet, "visible" = visible et "hidden" = invisible.

left

* la position x de l’objet en partant de la droite (voir style).

top

* la position y de l’objet en partant du haut (voir style).

width

* la largeur de l’objet.

height

* la hauteur de l’objet.

style

indique si sa position est "absolute" ou "relative".

overflow

Indique comment réagir si le contenu est plus large ou plus long que les dimensions width et height. Clip, none ou scroll.

* 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"

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

       Visites : 906 - Pages vues : 27571
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@