1- Introduire dans l'en-tête de la page HTML l'invocation du script "domapi.js" de la librairie partagée ou mieux de sa copie locale dans votre document complexe :
<head>
<script type="text/javascript"
src="/lib/js/domapi.js"></script>
</head>
2- Enclore dans les objets dynamiques dans des divisions, convenablement identifiées par des attributs "id" dont les valeurs sont toutes distinctes. Ces divisions doivent toutes avoir une position absolue pour être reconnues comme des "layers" par Netscape donc comme objets susceptibles d'être positionnés dynamiquement. Cette position est définie soit dans une balise <style> extérieure à la division, soit par un attribut de style en-ligne du type <div id="obj" style="...">. Dans tous les cas les indications de taille doivent être impérativement indiquées en pixels.
<head>
...
<style type="text/css">
.object1 { position:absolute; top:100px; left:50px; ...
};
.object2 { position:absolute; top:100px; left:350px; ...
};
.object3 { position:absolute; top:200px; left:50px; ...
};
</style>
...
</head>
<body>
<div id="object1">
...
</div>
<div id="object2">
...
</div>
<div id="object3">
...
</div>
<script type="text/javascript">
<--
// Création de l'objet racine "dom" contenant
tous les objets dynamiques :
createDOMAPI();
// Les objets individuels apparaissent comme
étant
// des propriétés de cet objet racine.
// Ces propriétés ont les mêmes
identifiants que les divisions.
// On peut maintenant manipuler les objets individuels.
// Examples : dom.object1, dom.object2, dom.object3
...
// -->
</script>
</body>
| Les méthodes indiquées avec un paramètre x assignent la propriété correspondante à cette valeur, si elle est présente. En cas d'absence elle retourne simplement la valeur correspondante. |
| createDOMAPI('nom') |
Création de l'interface avec les "Document Object Models". L'objet correspondant est crée sous le nom 'nom' (par défaut 'dom'). |
| dom.objectN.hide() |
Cache l'objet. |
| dom.objectN.show(e) | Montre l'objet. Le paramètre e est optionnel. S'il est utilisé, il doit contenir la variable d'événement "event" : l'objet est alors montré dans la position correspondante à celle où s'est produit l'événement. |
| dom.objectN.visibility(x) | Assigne l'état de visibilité de l'objet à "x" ou retourne cet état. |
| dom.objectN.toggle() | Bascule l'état de visibilité de l'objet. |
| dom.objectN.top(x) | Assigne la position du haut de l'objet à "x" ou retourne la position courante du haut de l'objet. |
| dom.objectN.left(x) | Assigne la position de la gauche de l'objet à "x" ou retourne la position courante de la gauche de l'objet. |
| dom.objectN.width(x) |
Assigne la largeur de l'objet à "x" ou retourne la largeur courante. |
| dom.objectN.height(x) | Assigne la hauteur de l'objet à "x" ou retourne la hauteur courante. |
| dom.objectN.top(x) | Assigne la position du haut de l'objet à "x" ou retourne la position courante du haut de l'objet. |
| dom.objectN.left(x) | Assigne la position de la gauche de l'objet à "x" ou retourne la position courante de la gauche de l'objet. |
| dom.objectN.width(x) |
Assigne la largeur de l'objet à "x" ou retourne la largeur courante. |
| dom.objectN.height(x) | Assigne la hauteur de l'objet à "x" ou retourne la hauteur courante. |
| dom.objectN.moveTo(x,y) |
Déplacement absolu en "x,y". |
| dom.objectN.moveBy(dx,dy) |
Déplacement relatif de "dx,dy". |
| dom.objectN.clipTop(x) | Restriction du haut de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipRight(x) | Restriction du côté droit de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipBottom(x) | Restriction du bas de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipLeft(x) | Restriction du côté gauche de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipWidth(x) | Restriction de la largeur de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipHeight(x) | Restriction de la hauteur de l'objet en "x" ou lecture de sa position. |
|
dom.objectN.clipRect
(top,right,bottom,left) |
Restriction du rectangle de l'objet selon les coordonnées "top, right, bottom, left" ou lecture de ces dimensions "rect(toppx, rightpx, bottompx, leftpx)". |
|
dom.objectN.clipInit
(top,right,bottom,left) |
Initialisation de la restriction du rectangle de l'objet selon les coordonnées "top,right,bottom,left" ou lecture de ces dimensions "rect(toppx, rightpx, bottompx, leftpx)". |
| dom.objectN.clipInitTop(x) | Initialisation de la restriction du haut de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitRight(x) | Initialisation de la restriction du côté droit de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitBottom(x) | Initialisation de la restriction du bas de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitLeft(x) | Initialisation de la restriction du côté gauche de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitWidth(x) | Initialisation de la restriction de la largeur de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitHeight(x) | Initialisation de la restriction de la hauteur de l'objet en "x" ou lecture de sa position. |
| dom.objectN.clipInitReset() | Restauration de la dernière valeur de la restriction du rectangle de visualisation de l'objet. |
| dom.objectN.zIndex(x) |
Assigne l'index d'empilement de l'objet à "x" ou retourne l'index d'empilement courant. |
| dom.objectN.backgroundColor(x) | Assigne la couleur de fond de l'objet à "x" ou retourne la couleur de fond courante de l'objet. |
| dom.objectN.backgroundImage(x) |
Assigne l'image de fond de l'objet à "x" ou retourne l'URL de l'image de fond courante de l'objet. |
| windowInnerWidth() | Retourne la largeur interne de la fenêtre courante. |
| windowInnerHeight() | Retourne la hauteur interne de la fenêtre courante. |
| loadImages(urls) | Charge les images dont les urls sont indiquées dans la liste d'arguments. Cette fonction doit être exécutée dans l'en-tête (...) pour réaliser un préchargement des images. |
| typeOf(x) | Retourne le type détaillé de l'objet x. Les types possibles sont number, string, boolean pour les types primitifs et Null, Number, Boolean, Array, Object, Function ainsi que tous les types créés par le constructeur "new" (objets java compris). |
| dispMsg(x) | Affiche le message "x" dans la barre de statut du navigateur et retourne la valeur booléenne "true". |
Rideau ! : manipulation de la visibilité
Ça converge ! : animation
Préchargement d'images
Types d'objets