SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
La technique des calques présentée ici ne fonctionne qu'avec Netscape version 4.x . Dans la version 6.0 entièrement reprogrammée et dans les sources Mozilla, toute la technique des calques n'est plus implémentée et ne fonctionne plus. La raison en est que le consortium W3 a refusé la technique des calques. À la place est recommandé le 
modèle DOM (DOM), qui est également implémenté dans Netscape à partir de la version 6.0. La technique des calques telle qu'elle est décrite ici n'est donc significative que pour des raisons de compatibilité vers l'amont avec les navigateurs Netscape de la série 4.x.
"HTML dynamique" - pour Netscape 4.x, ce n'est pas, comme pour le modèle DOM ou pour l'ancien modèle de l'Explorer Internet MS, l'accès à volonté et a posteriori à tous les éléments d'un fichier HTML. Avec Netscape, vous ne pouvez donc pas, comme avec l'Explorer Internet MS, formater différemment a posteriori un paragraphe de texte défini avec <p>...</p>, ou le transformer en titre n�1.
HTML dynamique n'existe chez Netscape 4.x qu'en relation avec des éléments positionnés. Pour Netscape, HTML dynamique représente la possibilité de traiter de façon dynamique des calques positionnés - donc de les faire apparaître, disparaître, les déplacer etc...
La technologie des calques de Netscape est cependant très puissante. La condition préalable en est la définition de calques en HTML. Certes, il est possible aussi d'écrire du HTML dynamique pour Netscape sans avoir recours au repère layer - cependant, tout le concept HTML dynamique que Netscape a mis dans la version 4.x de son navigateur repose sur le repère layer. Si on veut renoncer au repère layer , il n'y a qu'une issue: "simuler" les calques.
Pour cette raison, les exemples de cette page se concentrent pour l'essentiel sur la technologie des calques. Car c'est seulement ainsi qu'apparaît clairement la solution que poursuit Netscape avec son implémentation de HTML dynamique.
Pour comprendre les exemples de cette page, vous devez avant tout connaître les 
calques en HTML, ainsi qu'avoir des connaissances préalables en JavaScript.
Pour la technique des calques, l'objet JavaScript layers est essentiel. Là sont décrites systématiquement les différentes propriétés et méthodes qui sont utilisées ici dans les exemples.
  |
Afficher/cacher de façon dynamique les passages calquesÀ l'aide de JavaScript, vous pouvez afficher et cacher des calques de manière dynamique. Selon la façon dont vous définissez vos calques, vous pouvez obtenir les effets les plus divers. L'exemple qui suit démontre comment vous pouvez définir une "séance de diapositives" constituée de textes courts. L'utilisateur n'a plus besoin de faire défiler l'écran mais clique d'un texte à l'autre. Les textes sont affichés dans une "boite".
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var texte_actuel = 0;
var Texte = 3;
function texte_suivant() {
++texte_actuel;
if(texte_actuel >= Texte) texte_actuel = 0;
for(var i=0;i<Texte;i++)
document.layers[i].visibility = "hide";
document.layers[texte_actuel].visibility = "show";
}
//-->
</script>
</head><body>
<layer visibility="show" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt; font-weight:bold;"><span style="color:#000000; font-family:Arial,Helvetica,San-Serif; font-size:24pt; font-weight:bold;">1.</span><br>
On ne peut poser de pont qu'entre des rives s�par�es l'une de l'autre.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt; font-weight:bold; "><span style="color:#000000; font-family:Arial,Helvetica,San-Serif; font-size:24pt; font-weight:bold;">2.</span><br>
Plus l'attente est grande, plus son accomplissement est improbable.</p>
</layer>
<layer visibility="hide" top="150" left="50" width="400" height="125" bgcolor="#DDFFDD">
<p style="color:#006600; font-family:Arial,Helvetica,San-Serif; font-size:14pt; font-weight:bold; "><span style="color:#000000; font-family:Arial,Helvetica,San-Serif; font-size:24pt; font-weight:bold;">3.</span><br>
Celui qui se donne n'aime pas, parce qu'il ne s'aime pas;
seul celui qui s'offre aime, parcequ'il s'aime.</p>
</layer>
<layer top="275" left="50" width="400" bgcolor="#DDFFDD">
<center><form name="formulaire" action=""><input type="button" value=" suivant >> " onClick="texte_suivant()"></form></center>
</layer>
</body></html>
|
Dans le corps du fichier HTML de l'exemple sont définis en tout quatre calques. Les trois premiers contiennent des textes qui doivent changer de façon dynamique. Le quatrième calque contient un bouton. Quand l'utilisateur clique sur le bouton, une fonction JavaScript nommée texte_suivant() est appelée. Cette fonction est définie dans un passage JavaScript situé dans l'entête du fichier HTML. La fonction fait en sorte qu'à chaque fois le texte suivant soit affiché.
Veillez à ce que les trois premiers calques aient des mentions de position identiques. Les mentions top="150" (le coin supérieur gauche commence à 150 pixels du haut), left="50" (le coin supérieur gauche commence à 50 pixels de la gauche), width="400" (largeur du calque: 400 pixels), et height="125" (hauteur du calque: 125 pixels), sont les mêmes pour tous les calques. Les trois calques ne se distinguent en fin de compte que par la mention de visibilty=. Le premier calque est fixé sur "visible" avec visibilty="show", les deux autres sur "invisible" avec visibilty="hide". Ainsi on obtient que, dans un premier temps, seul le premier calque soit affiché à l'écran.
Le quatrième calque, le bouton de contrôle donc, contient lui aussi des mentions de position. Il a la même largeur que les deux premiers calques et commence aussi à la même position à gauche. Pour la hauteur, il commence exactement 125 pixels plus bas que les trois premiers calques. Étant donné que ceux-ci ont une hauteur de 125 pixels, le "calque du bouton de contrôle" colle sans joint visible aux calques du haut. Il ne contient aucune mention relative à la visibilité. Ce qui signifie qu'il est visible et qu'au cours du déroulement du JavaScript, rien ne changera. Car le contenu de ce calque dirige ce qui va arriver.
Dans le passage JavaScript de l'entête de fichier sont d'abord définies deux variables globales. Étant donné qu'elles se trouvent hors de toute fonction, leur valeur actuelle reste valable aussi longtemps que le fichier HTML est affiché. Dans la variable texte_actuel est sauvegardé le numéro du texte calque. Dans Texte est sauvegardé le nombre de textes pouvant être échangés en dynamique. Vous pourriez définir au lieu de trois calques avec du texte 10 ou 100 calques de ce genre. En fonction du nombre de calques définis, vous devez simplement modifier l'affectation de la valeur de départ de Texte.
Dans la fonction texte_suivant() est d'abord incrémenté le numéro de texte_actuel, car c'est à chaque fois le texte suivant qui doit être affiché. Pour finir, tous les calques avec des textes sont fixés sur "invisible" dans une boucle for. À la fin c'est le texte qui doit être affiché (texte_actuel) qui est fixé sur "visible". C'est ce qui produit l'effet d'une séance de diapositives.
Netscape élargit le calque selon son contenu. Quand le contenu d'un texte dans l'exemple ci-dessus est plus grand que le passage défini, il recouvre le calque du bouton de contrôle, de telle façon pourtant que le calque avec le bouton de contrôle est posé sur la partie inférieure du calque avec le texte. La raison en est que le calque avec le bouton de contrôle est défini après le calque avec le texte et que pour cette raison, il est plus haut sur le tas (couches). Si vous voulez fixer la taille d'un calque indépendamment de son contenu, vous devez utiliser l'attribut clip= (voir aussi: Rogner le domaine d'affichage des calques).
|
|
Superposer de façon dynamique les passages calquesVous pouvez positionner des calques de telle façon qu'ils se superposent. Sans l'intervention de JavaScript, cela ne donne pas beaucoup de sens, car l'utilisateur est censé pouvoir voir le contenu de chaque calque. Avec l'aide de JavaScript, vous pouvez faire en sorte que l'utilisateur puisse faire apparaître les différents calques en avant plan afin d'afficher leur contenu. Par ce moyen, vous pouvez parfaitement mettre différents contenus, qui normalement nécessiteraient plusieurs pages, sur une seule page WWW. Dans l'exemple suivant, les calques sont rangés comme dans un fichier à cartes. L'utilisateur peut en "retirer" un.
<html><head><title>Test</title>
<style type="text/css">
<!--
layer.Text { padding:5px; font-size:9pt; font-family:Arial,Helvetica,Sans-Serif; }
layer.entete { font-size:9pt; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; text-align:right; }
a:link, a:visited, a:active { color:white; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
-->
</style>
<script type="text/javascript">
<!--
var actif = "accueil";
function mise_en_valeur(nouvel_actif)
{
document.layers['opinion'].zIndex = 1;
document.layers['aide'].zIndex = 2;
document.layers['produits'].zIndex = 3;
document.layers['accueil'].zIndex = 4;
document.layers[actif].bgColor = "#CCCCCC";
document.layers[actif].layers[0].bgColor = "#666666";
document.layers[actif].layers[1].visibility = "hide";
document.layers[nouvel_actif].zIndex = 5;
document.layers[nouvel_actif].bgColor = "#FFCCFF";
document.layers[nouvel_actif].layers[0].bgColor = "#000000";
document.layers[nouvel_actif].layers[1].visibility = "show";
actif = nouvel_actif;
}
//-->
</script>
</head><body>
<layer id="opinion" top="130" left="10" width="360" height="230" bgcolor="#CCCCCC">
<layer class="entete" width="360" height="25" bgcolor="#666666">
<a href="javascript:mise_en_valeur('opinion')">opinion</a>
</layer>
<layer class="Text" top="25" visibility="hide">
Donnez votre avis:
<form name="formulaire" action=""><textarea rows="5" cols="25">bla bla</textarea></form>
</layer>
</layer>
<layer id="aide" top="155" left="70" width="360" height="230" bgcolor="#CCCCCC">
<layer class="entete" width="360" height="25" bgcolor="#666666">
<a href="javascript:mise_en_valeur('aide')">aide</a>
</layer>
<layer class="Text" top="25" visibility="hide">
Notre aide est vraiment bla bla
</layer>
</layer>
<layer id="produits" top="180" left="130" width="360" height="230" bgcolor="#CCCCCC">
<layer class="entete" width="360" height="25" bgcolor="#666666">
<a href="javascript:mise_en_valeur('produits')">produits</a>
</layer>
<layer class="Text" top=25 visibility=hide>
nos produits sont incroyablement bla bla
</layer>
</layer>
<layer id="accueil" top="205" left="190" width="360" height="230" bgcolor="#FFCCFF">
<layer class="entete" width="360" height="25" bgcolor="#000000">
<a href="javascript:mise_en_valeur('accueil')">ACCUEIL</a>
</layer>
<layer class="Text" top="25" visibility="show">
Notre page d'accueil est notre bla bla
</layer>
</layer>
</body></html>
|
Dans l'exemple sont définis quatre "grands" calques: un pour "opinion", un pour les "produits", pour l'"aide" et un pour l'accueil, ce qui veut dire que ce calque représente une sorte de page d'accueil, un calque d'accueil. Ce calque est d'abord affiché en premier plan, pour la bonne raison qu'il a été défini en dernier. Si vous ne notez aucun attribut z-index= pour les calques, c'est toujours le calque défini en dernier qui est tout au dessus.
Dans l'exemple, vous pouvez aussi reconnaître que dans chacun des quatre grands calques ont été définis deux calques "intérieurs". Les calques définis dans d'autres calques sont positionnés relativement à leur calque parent. Pour cela, vous devez vous représenter un calque comme un nouveau petit corps de fichier. Tout ce qui est noté à l'intérieur est positionné par rapport au calque extérieur.
Les mentions concernant top=, left=, height= et width= dans les calques de l'exemple ci-dessus ont toutes été précisées exactement pour faire en sorte que les calques représentent optiquement un fichier à cartes proprement triées. Essayez de trouver dans l'exemple les interdépendances des mentions de positionnement. Ainsi vous pouvez reconnaître comment vous devez procéder pour placer plusieurs calques bien répartis dans la fenêtre d'affichage - d'après un critère que vous choisissez.
Chacun des "grands" calques contient dans l'exemple ci-dessus deux calques intérieurs: un calque qui fait fonction de barre de titre et qui contient un lien, et un calque qui contient le contenu proprement-dit. Les liens dans les calques-barres de titre appellent une fonction JavaScript nommée mise_en_valeur(). Cette fonction met en oeuvre la mise en avant dynamique du "grand" calque, qui fait partie du lien cliqué (donc du calque parent du calque contenant le lien).
Dans le passage JavaScript, dans lequel se trouve la fonction mise_en_valeur(), est définie, avant la fonction, une variable actif. Elle reçoit au début le nom du calque qui doit être placé devant. C'est le nom qui a été attribué dans l'attribut id= du calque correspondant.
La fonction mise_en_valeur() attend un paramètre, à savoir le nom du calque qui doit être mis en avant à la place de celui qui l'était jusqu'alors. Dans les liens qui appellent la fonction est là aussi transmis le nom qui a été affecté dans le calque correspondant avec id=.
Dans la fonction mise_en_valeur() est établi dans un premier temps l'ordre normal des calques. Cela s'obtient en affectant un nombre à la propriété de l'objet layers zIndex. Plus le chiffre est élevé, plus le calque sera vers le haut dans la pile. La reconstruction de l'ordre normal des calques fait en sorte que la "pile de cartes du fichier", que l'exemple représente, ait toujours l'air rangée.
Ensuite, le calque jusqu'alors actif désigné par document.layers[actif] est traité par plusieurs instructions. La mention actif entre crochets désigne dans un premier temps le calque "accueil". Cependant, à la fin de la fonction, la valeur de la variable actif est modifiée: c'est là que lui est affecté le nom du nouveau calque placé au premier plan. Ainsi, ce calque sera-t-il, au prochain appel de la fonction, celui qui est concerné par document.layers[actif].
Les instructions qui concernent le calque jusqu'alors actif affectent à celui-ci les attributs qui, optiquement, le placent "en dessous" dans la pile de cartes du fichier.
Le calque dont le nom est transmis avec le paramètre nouvel_actif reçoit en revanche les attributs optiques qui font de lui le calque mis en valeur. Il reçoit le nombre le plus élevé pour zIndex. Ainsi, il sera affiché comme calque du dessus.
Dans le calque opinion est défini un formulaire. Ce formulaire est adressé dans Netscape 4.x avec document.layers.opinion.document.formulaire, étant donné qu'il fait partie du calque opinion. Un calque représente pour Netscape un document dans le document et a son propre objet document.
|
|
Mouvoir de façon dynamique les passages calquesVous pouvez "faire sauter" ou "faire voyager" dans la fenêtre d'affichage, des calques avec quelconques contenus. Le saut d'un endroit à un autre n'est qu'une seule commande, étant donné qu'elle est disponible comme méthode dans l'objet layers de JavaScript. Si en revanche vous désirez des effets de mouvement dirigés par le temps, vous devez programmer à la main le calcul de la position depuis le point de départ jusqu'à l'arrivée de la trajectoire. L'exemple suivant montre le principe du fonctionnement.
<html><head><title>Test</title>
<style type="text/css">
<!--
p.Nav { font-size:9pt; font-weight:bold }
a.Navlink:link { color:#FF0000 }
a.Navlink:visited { color:#FF0000 }
a.Navlink:active { color:#000000 }
-->
</style>
<script type="text/javascript">
<!--
function mouv_horiz(num_calque,jusque_gauche,Pixel,Pause) {
var Restpixel = jusque_gauche - document.layers[num_calque].left;
if(jusque_gauche < document.layers[num_calque].left) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[num_calque].moveBy(Pixel,0);
else
document.layers[num_calque].moveBy(Restpixel,0);
if(document.layers[num_calque].left != jusque_gauche)
window.setTimeout('mouv_horiz('+num_calque+','+jusque_gauche+','+Math.abs(Pixel)+')','+Pause+');
}
function mouv_vert(num_calque,jusque_haut,Pixel,Pause) {
var Restpixel = jusque_haut - document.layers[num_calque].top;
if(jusque_haut < document.layers[num_calque].top) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[num_calque].moveBy(0,Pixel);
else
document.layers[num_calque].moveBy(0,Restpixel);
if(document.layers[num_calque].top != jusque_haut)
window.setTimeout('mouv_vert('+num_calque+','+jusque_haut+','+Math.abs(Pixel)+')','+Pause+');
}
//-->
</script>
</head><body>
<layer left="10" top="10" width="450" height="250" bgcolor="#FFFF66">
<h1>Faire bouger vers...</h1>
<p>d�placer:
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,10)">en haut � gauche</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,10)">en haut � droite</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(10,260)">en bas � gauche</a> |
<a class="Navlink" href="javascript:document.layers[0].moveTo(260,260)">en bas � droite</a><br></p>
<p>Mouvoir vers:
<a class="Navlink" href="javascript:mouv_horiz(0,10,4,2)">� gauche</a> |
<a class="Navlink" href="javascript:mouv_horiz(0,260,4,2)">� droite</a> |
<a class="Navlink" href="javascript:mouv_vert(0,10,4,2)">en haut</a> |
<a class="Navlink" href="javascript:mouv_vert(0,260,4,2)">en bas</a></p>
</layer>
</body></html>
|
Dans le corps du fichier HTML de l'exemple ci-dessus est défini un calque. Ce calque contient en tout huit liens. Chaque lien exécute un code JavaScript. C'est la commande que le lien propose à l'utilisateur qui est réalisée.
Tous les liens assurent un nouveau positionnement du calque (dans lequel ils se trouvent eux-mêmes). Ceci n'est pas une obligation: la solution choisie dans l'exemple ci-dessus sert simplement de démonstration. Le calque qui doit être positionné en dynamique pourrait contenir tout à fait autre chose, comme par exemple des graphiques, des tableaux etc...
Les quatre premiers liens exécutent seulement des sauts, c'est à dire que lorsque l'un d'entre eux est cliqué, le contenu du calque est simplement aussitôt affiché à un autre endroit de la fenêtre. Pour exécuter cette tâche, l'objet layers de JavaScript met à disposition la méthode moveTo(). Avec une instruction telle que document.layers[0].moveTo(...), vous positionnez le premier calque du fichier (celui qui a l'index 0) à une nouvelle position. La méthode moveTo() fixe la nouvelle position du coin supérieur gauche du calque. Pour ce faire, la méthode attend deux paramètres, à savoir d'abord la valeur pour la gauche, et ensuite la valeur pour le haut. Avec une instruction comme document.layers[0].moveTo(260,10), le coin supérieur gauche est donc fixé à 260 pixels à partir de la gauche et à 10 pixels à partir du haut. Les mentions se réfèrent à l'élément parent respectif du calque. Étant donné que dans l'exemple ci-dessus aucun calque n'est placé dans un autre calque, la fenêtre d'affichage est donc l'élément parent.
Alors que le simple repositionnement est possible à l'aide d'une seule instruction JavaScript, qui se trouve dans l'exemple ci-dessus directement dans le lien correspondant, une fonction distincte qui détermine la trajectoire doit être appelée pour mouvoir les calques en dynamique. Dans l'exemple ci-dessus, il y a deux fonctions de ce type. La fonction mouv_horiz() peut déplacer le calque horizontalement vers la gauche ou vers la droite, la fonction mouv_vert() effectue également un déplacement, mais verticalement (vers le haut ou vers le bas). Selon le cas, c'est l'une ou l'autre fonction qui est appelée: si l'utilisateur clique l'un des liens "vers la gauche" ou "vers la droite", c'est la fonction mouv_horiz() est appelée, et pour les liens "vers le haut" ou "vers le bas", c'est la fonction mouv_vert() qui est appelée.
Les deux fonctions sont écrites généralement. C'est aussi la raison pour laquelle elles attendent en entrée différents paramètres, qui sont à transmettre à leur appel:
num_calque est le numéro d'index du calque qui doit être déplacé. Étant donné que dans l'exemple c'est toujours le même et unique calque existant qui doit être déplacé, c'est toujours son numéro d'index 0 qui est transmis à l'appel des fonctions.
jusque_gauche (pour mouv_horiz()) ou respectivement jusque_haut (pour mouv_vert()) est la nouvelle valeur, à laquelle le mouvement doit être arrêté. Selon que la valeur transmise est inférieure ou supérieure à la position actuelle du calque résulte automatiquement la direction du mouvement des calques.
Pixel est le nombre de pixels de chaque saut qui doit être effectué. Plus la valeur que vous transmettez est élevée, plus le mouvement sera rapide et saccadé. Dans l'exemple ci-dessus, 4 est transmis dans tous les cas.
Pause est un autre paramètre pour influencer la vitesse. Plus cette valeur est élevée, plus le mouvement est lent.
Un mouvement de calque ne consiste en rien d'autre qu'en un nouveau positionnement pas à pas du calque. Dans chacune des fonctions mouv_horiz() et mouv_vert() figurent, à peu près au milieu, deux instructions du type document.layers[num_calque].moveBy(...), dont toujours une seule est exécutée. C'est l'instruction avec laquelle le calque est repositionné. Il s'agit simplement de l'appel de la méthode moveBy() de l'objet layers. Cette méthode fonctionne exactement comme moveTo(), seulement avec des données relatives au lieu de données absolues.
Afin que le calque ne bouge pas qu'une seule fois, mais continue son mouvement, les deux fonctions mouv_horiz() et mouv_vert() se rappellent elles-mêmes après exécution. L'effet de boucle qui en résulte ne sera interrompu que lorsque la valeur finale désirée est atteinte.
L'appel de la fonction par elle-même est incorporé dans la méthode JavaScript window.setTimeout(). Ainsi le retardement transmis avec le paramètre Pause peut être pris en considération. L'appel de la fonction par elle-même peut paraître un peu compliqué. Cela est dû au fait que la fonction doit s'appeler elle-même avec les paramètres qu'elle attend. Malheureusement, il n'est pas possible de noter pour cela un appel de fonction normal et de retransmettre les paramètres reçus. À la place est construite une chaîne de caractères qui fournit à la fonction des valeurs effectives quand elle est rappelée.
Les autres instructions dans les fonctions servent au contrôle de la trajectoire et, avant tout, à ce que malgré les différents paramètres d'appel, la position finale désirée soit effectivement atteinte. Ainsi Restpixel est une variable utilitaire, qui recherche combien il reste de pixels entre la position actuelle du calque et la position finale désirée. Une détermination de la direction de déplacement est elle aussi importante. Si la position finale désirée du mouvement est plus petite que la position du calque au début du déplacement, alors la valeur d'un pas qui est transmise avec le paramètre Pixel doit être interprétée comme nombre négatif. Car il n'y a qu'ainsi que le mouvement peut se faire "en arrière" donc vers la gauche ou vers le haut. Avec l'expression Pixel=0-Pixel, la valeur d'un pas est "transcrite" au besoin en nombre négatif.
Des trajectoires plus compliquées nécessitent une programmation d'autant plus compliquée. Pour les mouvements en diagonale, ça n'est simple que si le nombre de pixels mesurant chaque pas est toujours proportionnel horizontalement et verticalement. Mais dés que vous voulez résoudre des tâches "tordues", par exemple celle d'aller le plus droit possible de la position haut 10 gauche 10 à la position haut 86 gauche 623, vous pouvez vous plonger dans les profondeurs de l'arithmétique. Et si vous voulez même des mouvements circulaires ou elliptiques, vous devez connaître les formules géométriques correspondantes et utiliser pour cela les méthodes prévues de l'objet Math en JavaScript.
|
|
Agrandir/réduire de façon dynamique les passages calquesPar la modification dynamique du passage affiché d'un calque, on peut obtenir d'innombrables effets intéressants, par exemple l'ouverture et la fermeture dynamiques de parties d'une page WWW. L'exemple suivant met en oeuvre trois "blocs" dont ne sont visibles dans un premier temps que les barres de titre. Chaque barre de titre contient un lien. En cliquant sur ce lien, se déroule sous la barre de titre un passage avec un contenu. Au prochain clic sur le lien, il s'enroule à nouveau.
<html><head><title>Test</title>
<style type="text/css">
<!--
layer.Text { padding:5px; font-size:14pt; font-family:Arial,Helvetica,Sans-Serif; color:#FFFFFF }
layer.entete { padding:5px; font-size:10pt; font-family:Arial,Helvetica,Sans-Serif; font-weight:bold; }
a:link, a:visited, a:active { color:#FFFFE0; }
a.normal:link { color:#AA5522; text-decoration:underline; }
a.normal:visited { color:#772200; text-decoration:underline; }
a.normal:active { color:#000000; text-decoration:underline; }
-->
</style>
<script type="text/javascript">
<!--
var Status = new Array("ferme","ferme","ferme");
function ouvre_ferme(num_calque) {
var i;
if(Status[num_calque] == "ferme") {
for(i=2;i<250;++i)
document.layers[num_calque].clip.bottom = i;
Status[num_calque] = "ouvert";
}
else {
for(i=250;i>2;--i)
document.layers[num_calque].clip.bottom = i;
Status[num_calque] = "ferme";
}
}
//-->
</script>
</head><body>
<layer class="Text" left="10" top="70" width="198" height="250" bgcolor="#000099" clip="0,0,198,2">
HTML est le langage pour structurer des projets hypertexte. une b�n�diction pour toutes les pages Web. Sans doute le format de fichier le plus populaire de l'histoire de l'informatique.
</layer>
<layer class="Text" left="210" top="70" width="198" height="250" bgcolor="#994000" clip="0,0,198,2">
CSS est le langage pour le formatage de pages Web. s'enclenche sans heurt dans HTML et obtient que les structures deviennent couleurs et formes.
</layer>
<layer class="Text" left="410" top="70" width="198" height="250" bgcolor="#008000" clip="0,0,198,2">
JavaScript est le lanage pour les pages Web dynamiques.s'enclenche sans heurt en HTML et aussi toujoursS plus dans les CSS. ce qui est d'ailleurs le plus difficile � comprendre.
</layer>
<layer class="entete" left="10" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:ouvre_ferme(0)">HTML</a>
</layer>
<layer class="entete" left="210" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:ouvre_ferme(1)">CSS</a>
</layer>
<layer class="entete" left="410" top="45" width="198" height="25" bgcolor="#000000">
<a href="javascript:ouvre_ferme(2)">JavaScript</a>
</layer>
</body></html>
|
Dans l'exemple, six calques en tout sont définis. Les trois premiers sont ceux qui peuvent s'ouvrir et se refermer. Dans un premier temps, ces calques sont fermés. Ce qui est obtenu grâce à l'attribut clip=. Par cette mention, le passage affiché d'un calque se laisse limiter à souhait. Les calques qui s'ouvrent et se referment dans l'exemple ci-dessus ont, grâce aux mentions width="198" height="250", une largeur de 198 et une hauteur de 250 pixels. Par la mention clip="0,0,198,2" on obtient ceci: malgré la largeur et la hauteur définies, le passage n'est visible que depuis 0 à gauche et 0 en haut, jusqu'à 198 à gauche et 2 en haut. Ce n'est qu'une bande toute mince qui n'est là que pour des raisons optiques. Avec 0,0,198,0, on n'apercevrait rien des calques.
Les trois calques du bas sont positionnés avec les mentions concernant top=, left=, width= et height= de telle façon qu'ils se trouvent exactement au dessus des calques pouvant être ouverts et refermés. Chaque calque d'entête contient un lien qui lorsqu'on le clique ouvre ou referme le calque placé dessous. Pour cela, une fonction JavaScript est appelée à chaque clic sur l'un des liens: la fonction ouvre_ferme(), définie dans un passage JavaScript de l'entête de fichier.
Dans le passage JavaScript, avant la fonction ouvre_ferme(), est déjà défini un tableau comprenant trois valeurs: le tableau Status. Ses trois valeurs sont initialisées avec la valeur de départ "ferme". Étant donné que ce tableau est défini en dehors de toute fonction, ses données sont toujours disponibles.
Dans la fonction ouvre_ferme(), il est vérifié si un calque est actuellement ouvert ou fermé. Pour cela, la fonction reçoit à son appel le paramètre num_calque. C'est le numéro d'index du calque qui doit être ouvert ou fermé. Étant donné que dans l'exemple, les trois premiers calques seront concernés, seuls les numéros d'index 0, 1 et 2 sont valables. À l'appel de la fonction dans les trois calques du bas, ce sont exactement ces trois valeurs qui sont transmises. Avec la requête if(Status[num_calque] == "ferme") la fonction ouvre_ferme(), compare ce que contient le tableau Status comme valeur pour le numéro d'index transmis. Si c'est la valeur "ferme" qui s'y trouve, le calque est ouvert. Quand il est ouvert, la valeur dans le tableau est fixée à "ouvert". Ainsi la fonction arrive-t-elle lors de la requête suivante pour le même calque à l'embranchement else, où elle exécute exactement le travail inverse.
L'ouverture et la fermeture proprement dites sont exécutées dans une boucle for. Là est compté de 2 à 250 pour l'ouverture et de 250 à 2 pour la fermeture. Selon la valeur actuelle de la boucle, la partie de dessous du passage clip du calque est modifiée de façon dynamique avec document.layers[num_calque].clip.bottom=. Les valeurs limites de 2 et 250 sont liées aux calques définis: 2 est la valeur qu'on trouve dans les mentions clip="0,0,198,2", et 250 est la hauteur des calques définis (height="250"). Lors de l'ouverture, le passage Clip dans le script est donc modifié de façon dynamique en 0,0,198,250. Ce qui veut dire : Le calque est complètement visible. Par contre, lors de la fermeture, l'état de départ du clip de 0,0,198,2 est rétabli.
|
|
Échanger de façon dynamique les contenus de calquesL'un des grands avantages de l'apport de Microsoft pour HTML dynamique, à savoir la faculté d'échanger à souhait le contenu d'éléments HTML, se laisse, à l'aide des calques de Netscape, tout au moins "reproduire". La raison en est que Netscape traite le calque comme un nouveau petit document distinct dans le document parent. Ainsi, tous les objets JavaScript subordonnés à l'objet document peuvent lui être aussi appliqués. L'exemple suivant démontre comment cela fonctionne dans le détail pour les calques et quelles possibilités s'ouvrent ainsi.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function ecrire_donnees() {
var texte = document.Input.document.saisie.champ.value;
var longueur = document.Input.document.saisie.champ.value.length;
document.Output.document.clear();
document.Output.document.write("<p>Vous avez entr� le texte suivant:<br>");
document.Output.document.write("<b>" + texte +"<\/b><\/p>");
document.Output.document.write("<p>La longueur de ce texte est de ");
document.Output.document.write("<b>" + longueur + " caract�res<\/b><\/p>");
document.Output.document.close();
}
//-->
</script>
</head><body>
<layer id="Input" bgcolor="#E4EEFF" style="padding:5mm" left="10" top="100" width="280" height="280">
<p>Entrez du texte dans le champ puis cliquez sur "Interaction"</p>
<form name="saisie" action="">
<textarea name="champ" cols="25" rows="6" wrap="virtual"></textarea><br>
<input type="button" value="Interaction" width="220" onClick="ecrire_donnees()">
</form>
</layer>
<layer id="Output" style="padding:5mm" left="310"
top="100" width="280" height="280">
</layer>
</body></html>
|
Dans l'exemple sont définis deux calques: l'un avec le nom (id) Input (entrée) et l'autre avec le nom Output (sortie). Les deux calques sont positionnés de telle façon que le calque pour la sortie apparaisse à côté du calque pour l'entrée. Au début cependant, le calque pour la sortie ne reçoit aucun contenu. En revanche, dans le calque pour l'entrée est défini un formulaire. Le formulaire comprend un champ de plusieurs lignes et un bouton qui, lorsqu'il est cliqué par l'utilisateur, appelle une fonction JavaScript ecrire_donnees(), laquelle est définie dans un passage JavaScript dans l'entête du fichier.
La fonction recherche d'abord le texte entré et sa longueur. Ensuite elle écrit ces données pour le contrôle dans le calque de sortie nommé Output. L'important est qu'avant l'écriture dynamique du contenu, la méthode clear() soit appelée afin d'effacer le contenu actuel du calque, et qu'après l'écriture, la méthode close() fermant le processus soit appelée, de façon à ce qu'à la prochaine fois un nouvel accès en écriture soit possible. Entre temps, les données proprement dites sont écrites, à savoir avec la méthode write().
Ces trois méthodes sont toutes des méthodes connues depuis longtemps de l'objet document de JavaScript. Ce qui est particulier dans le cas du calque, est que l'objet document est utilisé en double dans les instructions. Un exemple en est l'instruction: document.Output.document.clear();. Au début de la fonction pour rechercher le contenu du champ du formulaire, on retrouve également cette double utilisation de document. Ce genre de constructions s'explique ainsi: par la mention document notée devant, les objets layer peuvent être adressés étant donné qu'ils sont subordonnés à l'objet document. Dans l'exemple, Output est le nom d'un calque. Par son nom, le calque est adressé. Mais un calque est également lui-même un "document". C'est pourquoi vous pouvez noter derrière le nom encore une fois la mention document, suivie des propriétés et méthodes de l'objet document. Les instructions se rapportent alors aux éléments contenus dans le calque correspondant. Les éléments contenus dans les calques doivent être adressés de cette manière. Dans l'exemple ci-dessus, vous n'accédez par exemple au contenu du champ du formulaire qu'avec document.Input.document.saisie.champ.value (document.saisie.champ.value provoquerait par contre un message d'erreur).
Avec ceci, il n'y a pour ainsi dire pas de limites à l'imagination. Tout ce que vous pouvez calculer et rechercher en JavaScript grâce à une interaction avec l'utilisateur à l'aide d'un formulaire peut être sorti de cette manière de façon dynamique. Avec des méthodes comme window.setTimeout() vous pouvez également écrire à retardement des contenus dans les calques.
|
|
Simuler un calque sans élément 
layerSous la pression de Microsoft et au vu du fait que le consortium W3 ne se prépare pas à prendre le repère layer dans le standard HTML, et de ce fait, la base pour HTML dynamique d'après l'apport Netscape, ce dernier a élargi la faculté de positionnement dynamique aux deux repères HTML "abstraits" <div>...</div> et <span>...</span>. Si dans de tels repères HTML vous notez des mentions de feuilles de style concernant le positionnement de l'élément, vous pouvez accéder à ces mentions à l'aide de JavaScript. Netscape interprète alors les mentions exactement comme pour des calques.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function montrer() {
document.affiche_image.visibility = "visible";
document.montrer_lien.visibility = "hidden";
document.cacher_lien.visibility = "visible";
}
function cacher() {
document.affiche_image.visibility = "hidden";
document.cacher_lien.visibility = "hidden";
document.montrer_lien.visibility = "visible";
}
//-->
</script>
<style type="text/css">
<!--
#montrer_lien {
position:absolute; left:100; top:140; width:400; height:30; visibility:visible; }
#cacher_lien {
position:absolute; left:100; top:140; width:400; height:30; visibility:hidden; }
#affiche_image {
position:absolute; left:100; top:170; width:400; height:230; visibility:hidden; }
-->
</style>
</head><body>
<div id="montrer_lien">
<a href="javascript:montrer()"><b>Afficher l'image</b></a>
</div>
<div id="cacher_lien">
<a href="javascript:cacher()"><b>Cacher l'image</b></a>
</div>
<div id="affiche_image">
<img src="penseur.jpg" width="91" height="177" border="0" alt="penseur">
</div>
</body></html>
|
L'exemple fait en sorte qu'une image invisible au départ s'affiche lorsqu'un lien est cliqué. En même temps apparaît un nouveau lien qui permet de faire disparaître l'image. De cette manière, on peut toujours faire réapparaître ou re-disparaître l'image.
Dans le corps du fichier sont définis à cet effet trois passages avec <div>...</div>. Les trois repères d'ouverture div contiennent des mentions de feuilles de style relatives au positionnement et affichage d'éléments dans le passage style de l'entête de fichier. Sans de telles mentions, un accès dynamique à l'élément correspondant n'est pas possible. La définition de mentions de feuilles de style globales vient du fait que certaines versions de Netscape 4 connaissent des problèmes avec ces mentions dans le repère d'ouverture <div>.
Les deux premiers passages <div> de l'exemple ont les mêmes mentions concernant le positionnement. Ils ne se différencient uniquement que par l'affectation de valeur pour la mention visibility=. Ainsi les deux passages seront affichés au même endroit, l'un des passages toutefois restant éteint dans un premier temps tandis que l'autre est affiché.
Le troisième passage <div> est l'endroit réservé pour l'image à afficher. Lui aussi est dans un premier temps non-visible.
Chacun des deux premiers passages contient un lien. En cliquant sur chacun de ces liens est appelée une fonction JavaScript, définie dans un passage JavaScript de l'entête du fichier. Le passage affiché en premier contient un lien qui, lorsqu'on le clique, appelle la fonction montrer().
La fonction montrer() ne fait rien d'autre que modifier les critères d'affichage des trois passages <div>. Le premier passage, dont le lien a permis d'appeler la fonction, est alors fixé sur invisible document.montrer_lien.visibility="hidden". Le deuxième passage avec l'autre lien est par contre fixé sur visible. Même le passage avec l'image devient visible.
Maintenant sont affichés le deuxième lien ("cacher l'image" et l'image elle-même. En cliquant sur le lien est appelée l'autre fonction JavaScript cacher(). Cette fonction travaille exactement comme la fonction montrer(), mais à l'envers.
L'accès aux passages <div> est rendu possible par l'attribution d'un nom avec <div> dans la définition du passage <div>. Par document.nomdupassage, un accès aux propriétés telles que visibility, top, left, width, height ou clip est alors possible. Ainsi, pratiquement toutes les missions peuvent être résolues sans mettre en oeuvre le repère <layer>.
Un élément layer ne peut être simulé que si le passage div est positionné de façon absolue.
Vous pouvez - comme dans l'exemple utiliser à la place des propriétés visibility hide et show, les propriétés hidden et visible, étant donné que Netscape utilise également ces mentions correctement.
|
|
L'objet EventL'objet Event de JavaScript permet de réagir à des événements utilisateur. Il représente une extension des Event-Handler classiques. L'exemple suivant démontre les possibilités de l'objet Event.
<html><head><title>Test</title>
<style type="text/css">
<!--
layer { font-size:10pt; font-family:Arial }
layer.entete { color:#FFFFFF; padding:1mm; cursor:hand; }
layer.Text { color:#000000; padding-top:30px; padding-left:1mm; padding-right:1mm }
-->
</style>
</head><body>
<layer id="vert" class="Text" bgcolor="#99FF99" top="170" left="10" width="200" height="180">
<layer id="entete_vert" class="entete" bgcolor="#000000" top="0" left="0" width="200" height="25">
Barre de titre du calque vert
</layer>
Cliquez donc avec la souris sur la barre de titre de ce calque,
maintenez la touche appuy�e et d�placez la souris � un autre endroit.
</layer>
<layer id="jaune" class="Text" bgcolor="#FFFF66" top="10" left="310" width="300" height="120">
<layer id="entete_jaune" class="entete" bgcolor="#000000" top="0" left="0" width="300" height="25">
Barre de titre du calque jaune
</layer>
Cliquez donc avec la souris sur la barre de titre de ce calque,
maintenez la touche appuy�e et d�placez la souris � un autre endroit.
</layer>
<script type="text/javascript">
<!--
vert = document.layers['vert'];
titre_vert = document.layers['vert'].document.layers['entete_vert'].document;
jaune = document.layers['jaune'];
titre_jaune = document.layers['jaune'].document.layers['entete_jaune'].document;
titre_vert.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
titre_vert.onmousedown=depart_vert;
titre_vert.onmouseup=fin_vert;
document.layers['vert'].document.layers['entete_vert'].onload=initial_vert;
titre_jaune.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
titre_jaune.onmousedown=depart_jaune;
titre_jaune.onmouseup=fin_jaune;
document.layers['jaune'].document.layers['entete_jaune'].onload=GelbReset;
function initial_vert()
{ titre_vert.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function GelbReset()
{ titre_jaune.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function depart_vert()
{ titre_vert.captureEvents(Event.MOUSEMOVE); titre_vert.onmousemove=tire_vert; }
function depart_jaune()
{ titre_jaune.captureEvents(Event.MOUSEMOVE); titre_jaune.onmousemove=ZiehGelb; }
function tire_vert(evenement)
{ vert.left = evenement.pageX; vert.top = evenement.pageY; }
function tire_jaune(evenement)
{ jaune.left = evenement.pageX; jaune.top = evenement.pageY; }
function fin_vert()
{ titre_vert.onmousemove=0; titre_vert.releaseEvents(Event.MOUSEMOVE); }
function fin_jaune()
{ titre_jaune.onmousemove=0; titre_jaune.releaseEvents(Event.MOUSEMOVE); }
//-->
</script>
</body></html>
|
Dans l'exemple ont été définis en tout quatre calques dont deux "externes" (avec id="vert" et id="jaune"), et pour chacun d'entre eux un calque "interne" avec (id="entete_vert" et id="entete_jaune") . Les calques internes sont structurés de telle façon qu'ils semblent être les barres de titre des deux calques externes - d'où le nom id.
Comme vous pouvez le voir, aucun appel JavaScript ne figure ni dans la définition du calque ni dans un des calques. Pourtant, les deux barres de titre sont "sensitives": si l'utilisateur y clique avec la souris et bouge la souris tout en maintenant la touche appuyée, tout le calque "externe" qui en fait partie bouge avec. Cela s'explique par le concept de l'objet Event: celui-ci n'a pas besoin de gestionnaire d'événement dans HTML pour lancer des actions JavaScript.
Le passage JavaScript de l'exemple ci-dessus contient par contre quelques choses "inhabituelles". Il est défini sous les calques parce que dés sa lecture son code est exécuté et qu'il se réfère aux calques définis. Les calques doivent donc à ce moment précis avoir déjà été lus - faute de quoi on obtient un message d'erreur.
Les quatre premières lignes du code JavaScript de l'exemple sauvegardent simplement d'assez longues chaînes de propriétés objet dans des variables, étant donné que celles ci devront être notées souvent dans la suite du processus. Suivent ensuite quatre instructions pour chacun des calques vert et jaune. La méthode captureEvents() fait en sorte que les actions de l'utilisateur sont surveillées et signalées si elles surviennent. La méthode captureEvents() attend comme paramètre une valeur. Notez pour cela d'après le schéma Event.LEQUEL les événements qui doivent être surveillés. Les événements souhaités sont à séparer par le "ou" logique exclusif (simple trait vertical). Vous pouvez apprendre quels autres événements existent en sus de ceux de l'exemple ci-dessus dans la référence objet JavaScript à l'objet event.
Quand l'un des événements surveillés survient, des fonctions sont appelées. Observez à ce titre la syntaxe un peu curieuse: avec une inscription telle que titre_vert.onmousedown=depart_vert la fonction depart_vert() écrite soi-même est appelée - elle est définie plus bas dans le script. Pour l'appel de la fonction, vous ne devez pas, dans ce cas là, noter de parenthèses après le nom de la fonction!
Suivez donc maintenant le cas dans l'exemple, où l'utilisateur clique sur la barre de titre du calque vert: l'événement MOUSEDOWN pour titre_vert est alors signalé. Pour ce cas (onmousedown) la fonction depart_vert est appelée. Dans cette fonction est surveillé à son tour si l'utilisateur bouge la souris en tenant la touche appuyée. Si oui, est appelée selon le même schéma la fonction tire_vert. Bien que la fonction ne reçoive aucun paramètre, elle en attend un - même si c'est contre toutes les règles habituelles. Le paramètre attendu n'est cependant pas une "valeur" comme il est usuel, mais simplement un nom pour l'événement actuel. Dans l'exemple le nom evenement a été choisi. Sous le nom attribué, les propriétés de l'objet Event peuvent être adressées. Étant donné que c'est le cas dans la fonction tire_vert, un tel nom est indispensable. La fonction tire_vert est active aussi longtemps que l'utilisateur tient la touche de la souris appuyée. Pendant ce temps, les propriétés PageX (position actuelle de la souris à partir de la gauche) et PageY (position actuelle de la souris à partir du haut) de evenement sont actualisées "aussi souvent que possible". Ces valeurs sont affectées de façon dynamique au calque concerné comme nouvelles valeurs pour le coin supérieur gauche. Il en résulte l'effet de mouvement.
Si l'utilisateur relâche la touche de souris, la fonction tire_vert est aussitôt abandonnée. Étant donné que la surveillance d'événements est encore active, c'est maintenant l'événement MOUSEUP qui est signalé. Pour ce cas, c'est la fonction fin_vert qui est appelée. Cette fonction contient deux instructions pour "ranger".
Si vous n'entrepreniez rien d'autre, le calque ne pourrait plus être bougé après ce premier mouvement. Pour qu'il puisse toujours continuer à être déplacé, un événement LOAD intervient automatiquement. Celui-ci est capturé avec onload et appelle ici la fonction initial_vert. Cette fonction démarre une nouvelle surveillance des événements.
La façon de procéder pour le calque jaune est analogue à celle du calque vert.
|
|
Scripts Inline pour les calquesNetscape propose une syntaxe JavaScript simplifiée pour modifier à l'intérieur d'un calque ses propriétés de façon dynamique.
<html><head><title>Test</title>
<style type="text/css">
<!--
layer { padding:1mm; }
p.lien { font-size:10pt; font-weight:bold; font-family:Arial; color:yellow; }
p.Text { font-size:10pt; font-family:Arial; color:white; }
-->
</style>
</head><body>
<layer class="entete" bgcolor=#000000 top="175" left="50" width="500" height="200"
clip="0,0,500,25" onMouseover="montrer()" onMouseout="cacher()">
<p class="lien">Ce que vous avez d�j� toujours voulu savoir sur ...</p>
<p class="Text"><span style="color:red; font-size:48pt">SECHS</span><br>
Il s'agit tout simplement d'un nombre qui d�signe en allemand une demi douzaine tr�s exactement.</p>
<script type="text/javascript">
<!--
function montrer() { clip.bottom = 200; }
function cacher() { clip.bottom = 25; }
//-->
</script>
</layer>
</body></html>
|
Dans l'exemple est défini un calque. Cependant, avec une mention relative à clip=, le domaine d'affichage du calque est rogné dans un premier temps, de sorte que juste le premier paragraphe de texte soit visible. Si l'utilisateur passe avec la souris sur le passage visible du calque, la fonction JavaScript montrer() est appelée. Celle-ci modifie le domaine Clip de telle façon que le calque est affiché complètement. Si la souris quitte à nouveau le domaine du calque, la fonction cacher() est appelée. Cette fonction rétablit le domaine Clip à sa valeur initiale.
L'important avec cette formule est que le passage JavaScript soit défini dans le calque. Ensuite, vous n'avez pas besoin de vous soucier de l'adressage correct du calque avec des numéros d'index ou des noms. Vous pouvez noter simplement des instructions comme clip.bottom=[valeur] (comme dans l'exemple) ou des instructions comme top=, left= ou bgColor=, pour modifier la façon d'agir ou l'apparence du calque. Pour les propriétés que vous pouvez modifier, consultez la référence de l'objet layers.
|
| |
 |
Liaison de données (seulement Microsoft)
|
 |
L'ancien modèle DHTML de Microsoft
|
| SELFHTML/Aides à la navigation HTML dynamique Les différents modèles DHTML |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@selfhtml.com.fr