SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Positionnement dynamique chez Netscape"HTML dynamique" - pour Netscape, ce n'est pas, comme pour 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. Une transposition presque complète du modèle objet document (DOM = Document Object Model) en JavaScript, telle qu'elle est réalisée à l'aide de l'objet all chez l'Explorer Internet MS, n'existe pas chez Netscape.
HTML dynamique n'existe chez Netscape 4.x qu'en relation avec des éléments positionnés. C'est pourquoi il est aussi question ici de "positionnement dynamique". Pour Netscape, HTML dynamique représente la possibilité de traiter de façon dynamique des layer positionnés - donc de les faire apparaître, disparaître, les déplacer etc.
La technologie layer de Netscape est cependant très puissante. La condition préalable en est la définition de layer 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 layer.
Pour cette raison, les exemples de cette page se concentrent pour l'essentiel sur la technologie Layer. 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 
layer
en HTML, ainsi qu'avoir des connaissances préalables en JavaScript.
Tous les exemples de cette page ne fonctionnent qu'avec Netscape à partir de la version 4.x.
 
|
Afficher/cacher en dynamique les passages LayerÀ l'aide de JavaScript, vous pouvez afficher et cacher des layer de manière dynamique. Selon la façon dont vous définissez vos layer, 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>Titre du fichier</title>
<style type="text/css">
<!--
p {
color:#006600;
font-family:Arial,Helvetica,San-Serif;
font-size:14pt;
font-weight:bold;
padding:5mm
}
//-->
</style>
<script language="JavaScript">
<!--
var texteactuel = 1;
var Texte = 2;
function textesuivant()
{
++texteactuel;
if(texteactuel > Texte) texteactuel = 1;
for(i=0;i<Texte;i++)
document.layers[i].visibility = "hide";
document.layers[texteactuel-1].visibility = "show";
}
//-->
</script>
</head>
<body>
<layer visibility=show top=150 left=50 width=400 height=125 bgcolor=#DDFFDD>
<p> Ceci est le premier texte</p>
</layer>
<layer visibility=hide top=150 left=50 width=400 height=125 bgcolor=#DDFFDD>
<p> Ceci est le deuxième texte</p>
</layer>
<layer top=275 left=50 width=400 bgcolor=#DDFFDD>
<center><form>
<input type=button value=" suite >> " onClick="textesuivant()">
</form></center>
</layer>
</body>
</html>
|
Dans le corps du fichier HTML de l'exemple sont définis en tout trois layer. Le
premier et le deuxième contiennent des textes qui doivent changer de façon
dynamique. Le troisième layer contient un bouton. Quand l'utilisateur clique
sur le bouton, une 
fonction
JavaScript nommée textesuivant() 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 deux premiers layer 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 layer: 400 pixels), et height=125 (hauteur du layer: 125 pixels), sont les mêmes pour les deux layer. Les deux layer ne se distinguent en fin de compte que par la mention de visibilty=. Le premier layer est fixé sur "visible" avec visibilty=show, le deuxième sur "invisible" avec visibilty=hide. Ainsi on obtient que, dans un premier temps, seul le premier layer soit affiché à l'écran.
Le troisième layer, le bouton de contrôle donc, contient lui aussi des mentions de position. Il a la même largeur que les deux premiers layer et commence aussi à la même position à gauche. Pour la hauteur, il commence exactement 125 pixels plus bas que les deux premiers layer. Étant donné que ceux-ci ont une hauteur de 125 pixels, le "layer du bouton de contrôle" colle sans joint visible aux layer 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 layer 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 texteactuel est sauvegardé le numéro du texte actuel. Dans Texte
est sauvegardé le nombre de textes pouvant être échangés en dynamique. Vous
pourriez définir au lieu de deux layer avec du texte 10 ou 100 layer de ce
genre. En fonction du nombre de layer définis, vous devez simplement modifier
l'affectation de la valeur de départ de Texte.
Dans la fonction textesuivant() est d'abord incrémenté le numéro de texteactuel, car c'est à chaque fois le texte suivant qui doit être affiché. Pour finir, tous les layer avec des textes sont fixés sur "invisible" dans une boucle for. À la fin c'est le texte qui doit être affiché (texteactuel) qui est fixé sur "visible". C'est ce qui produit l'effet d'une séance de diapositives.
Netscape élargit le layer 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
layer du bouton de contrôle, de telle façon pourtant que le layer avec le
bouton de contrôle est posé sur la partie inférieure du layer avec le texte.
La raison en est que le layer avec le bouton de contrôle est défini après
le layer avec le texte et que pour cette raison, il est plus haut sur le tas (couches).
Si vous voulez fixer la taille d'un layer indépendamment de son contenu, vous
devez utiliser l'attribut clip= (voir aussi: rogner le domaine d'affichage des
layer).
|
|
Superposer en dynamique des passages layerVous pouvez positionner des layer 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 layer. Avec l'aide de JavaScript, vous pouvez faire en sorte que l'utilisateur puisse faire apparaître les différents layer 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 layer sont rangés comme dans un fichier à cartes. L'utilisateur peut en "retirer" un.
<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
layer.entete { text-align:right }
layer.texte { padding:5px }
</style>
<script language="JavaScript">
<!--
var actif = "Home";
function misenvaleur(actifneuf)
{
document.layers['Infos'].zIndex = 1;
document.layers['News'].zIndex = 2;
document.layers['Home'].zIndex = 3;
document.layers[actif].bgColor = "#CCCCCC";
document.layers[actif].layers[0].bgColor = "#666666";
document.layers[actif].layers[1].visibility = "hide";
document.layers[actifneuf].zIndex = 4;
document.layers[actifneuf].bgColor = "#FFCCFF";
document.layers[actifneuf].layers[0].bgColor = "#000000";
document.layers[actifneuf].layers[1].visibility = "show";
actif = actifneuf;
}
//-->
</script>
</head>
<body link=#FFFFFF vlink=#FFFFFF alink=#FFFFFF text=#000000>
<layer id="Infos" top=155 left=70 width=360 height=230 bgcolor=#CCCCCC>
<layer class="entete" width=360 height=25 bgcolor=#666666>
<a href="javascript:misenvaleur('Infos')">Infos</a>
</layer>
<layer class="texte" top=25 visibility=hide>
Ici figurent les informations
</layer>
</layer>
<layer id="News" top=180 left=130 width=360 height=230 bgcolor=#CCCCCC>
<layer class="entete" width=360 height=25 bgcolor=#666666>
<a href="javascript:misenvaleur('News')">News</a>
</layer>
<layer class="texte" top=25 visibility=hide>
Ici figurent les News
</layer>
</layer>
<layer id="Home" top=205 left=190 width=360 height=230 bgcolor=#FFCCFF>
<layer class="entete" width=360 height=25 bgcolor=#000000>
<a href="javascript:misenvaleur('Home')">HOME</a>
</layer>
<layer class="texte" top=25 visibility=show>
Ici figure le texte d'introduction
</layer>
</layer>
</body>
</html>
|
Dans l'exemple sont définis trois "grands" layer: un pour les infos, un pour les news et un pour l'accueil, ce qui veut dire que ce layer représente une sorte de page d'accueil, un layer d'accueil. Ce layer 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 layer, c'est toujours le layer défini en dernier qui est tout au dessus.
Dans l'exemple, vous pouvez aussi reconnaître que dans chacun des layer pour infos, news et accueil ont été définis deux layer "intérieurs". Les layer définis dans d'autres layer sont positionnés relativement à leur layer parent. Pour cela, vous devez vous représenter un layer comme un nouveau petit corps de fichier. Tout ce qui est noté à l'intérieur est positionnés par rapport au layer extérieur.
Les mentions concernant top=, left=, height= et width= dans les layer de l'exemple ci-dessus ont toutes été précisées exactement pour faire en sorte que les layer 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 layer bien répartis dans la fenêtre d'affichage - d'après un critère que vous choisissez.
Chacun des "grands" layer contient dans l'exemple ci-dessus deux layer intérieurs: un layer qui fait fonction de barre de titre et qui contient un lien, et un layer qui contient le contenu proprement-dit. Les liens dans les layer-barres de titre appellent une fonction JavaScript nommée misenvaleur(). Cette fonction met en oeuvre la mise en avant dynamique du "grand" layer, qui fait partie du lien cliqué (donc du layer parent du layer contenant le lien).
Dans le passage JavaScript, dans lequel se trouve la fonction misenvaleur(),
est définie, avant la fonction, une variable actif. Elle reçoit au
début le nom du layer qui doit être placé devant. C'est le nom qui a
été attribué dans l'attribut id= du layer correspondant.
La fonction misenvaleur() attend un paramètre, à savoir le nom du
layer 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 layer correspondant avec id=.
Dans la fonction misenvaleur() est établi dans un premier temps l'ordre normal des layer. Cela s'obtient en affectant un nombre à la propriété de l'objet layers zIndex. Plus le chiffre est élevé, plus le layer sera vers le haut dans la pile. La reconstruction de l'ordre normal des layer fait en sorte que la "pile de cartes du fichier", que l'exemple représente, ait toujours l'air rangée.
Ensuite, le layer 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 layer "Home". 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 layer placé au premier plan. Ainsi, ce
layer sera-t-il, au prochain appel de la fonction, celui qui est concerné par document.layers[actif].
Les instructions qui concernent le layer jusqu'alors actif affectent à celui-ci les
attributs qui, optiquement, le placent "en dessous" dans la pile
de cartes du fichier.
Le layer dont le nom est transmis avec le paramètre actifneuf reçoit en revanche les attributs optiques qui font de lui le layer mis en valeur. Il reçoit le nombre le plus élevé pour zIndex. Ainsi, il sera affiché comme layer du dessus.
|
|
Mouvoir des passages layer en dynamiqueVous pouvez "faire sauter" ou "faire voyager" dans la fenêtre d'affichage des layer 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>Titre du fichier</title>
<script language="JavaScript">
<!--
function mouvhoriz(LayerNum,jusgauche,Pixel,Pause)
{
Restpixel = jusgauche - document.layers[LayerNum].left;
if(jusgauche < document.layers[LayerNum].left) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[LayerNum].moveBy(Pixel,0);
else
document.layers[LayerNum].moveBy(Restpixel,0);
if(document.layers[LayerNum].left != jusgauche)
window.setTimeout('mouvhoriz('+LayerNum+','+jusgauche+','+Math.abs(Pixel)+')','+Pause+');
}
function mouvvertic(LayerNum,jushaut,Pixel,Pause)
{
Restpixel = jushaut - document.layers[LayerNum].top;
if(jushaut < document.layers[LayerNum].top) Pixel=0-Pixel;
if(Math.abs(Restpixel) > Math.abs(Pixel))
document.layers[LayerNum].moveBy(0,Pixel);
else
document.layers[LayerNum].moveBy(0,Restpixel);
if(document.layers[LayerNum].top != jushaut)
window.setTimeout('mouvvertic('+LayerNum+','+jushaut+','+Math.abs(Pixel)+')','+Pause+');
}
//-->
</script>
</head>
<body link=#FF0000 vlink=#FF0000 alink=#000000 text=#000000>
<layer left=10 top=10 width=450 height=150>
<p>bouge:
<a href="javascript:document.layers[0].moveTo(10,10)">en haut à gauche</a> |
<a href="javascript:document.layers[0].moveTo(260,10)">en haut à droite</a> |
<a href="javascript:document.layers[0].moveTo(10,260)">en bas à gauche</a> |
<a href="javascript:document.layers[0].moveTo(260,260)">en bas à droite</a><br>
va:
<a href="javascript:mouvhoriz(0,10,4,2)">à gauche</a> |
<a href="javascript:mouvhoriz(0,260,4,2)">à droite</a> |
<a href="javascript:mouvvertic(0,10,4,2)">en haut</a> |
<a href="javascript:mouvvertic(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 layer. Ce layer 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 layer (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 layer 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 layer 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 layer 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 layer. 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 layer. Étant donné que dans l'exemple ci-dessus aucun layer n'est placé dans un autre layer, 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 layer en dynamique. Dans l'exemple ci-dessus, il y a deux fonctions de ce type. La fonction mouvhoriz() peut déplacer le layer horizontalement vers la gauche ou vers la droite, la fonction mouvvertic() 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 mouvhoriz() est appelée, et pour les liens "vers le haut" ou "vers le bas", c'est la fonction mouvvertic() 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:
LayerNum est le numéro d'index du layer qui doit être déplacé.
Étant donné que dans l'exemple c'est toujours le même et unique layer
existant qui doit être déplacé, c'est toujours son numéro d'index 0 qui est
transmis à l'appel des fonctions.
jusgauche (pour mouvhoriz()) ou respectivement jushaut (pour
mouvvertic()) 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 layer résulte automatiquement la
direction du mouvement.
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 layer ne consiste en rien d'autre qu'en un nouveau positionnement pas à pas du layer. Dans chacune des fonctions mouvhoriz() et mouvvertic() figurent, à peu près au milieu, deux instructions du type document.layers[LayerNum].moveBy(...), dont toujours une seule est exécutée. C'est l'instruction avec laquelle le layer 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 layer ne bouge pas qu'une seule fois, mais continue son mouvement,
les deux fonctions mouvhoriz() et mouvvertic()
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 layer 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 layer 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. La difficulté particulière dans tout cela n'est pas tant l'utilisation de formules en JavaScript que la transcription des résultats de formule en effets d'escalier - car vous ne pouvez pas déplacer un layer du nombre Pi, mais toujours d'un nombre de pixels horizontalement et verticalement.
|
|
Agrandir/réduire des passages Layer en dynamiquePar la modification dynamique du passage affiché d'un layer, 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>Titre du fichier</title>
<style type="text/css">
layer.texte { 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; }
</style>
<script language="JavaScript">
<!--
var Status = new Array("ferme","ferme","ferme");
function ouvreferme(LayerNum)
{
if(Status[LayerNum] == "ferme")
{
for(i=2;i<250;++i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "ouvert";
}
else
{
for(i=250;i>=2;--i)
document.layers[LayerNum].clip.bottom = i;
Status[LayerNum] = "ferme";
}
}
//-->
</script>
</head>
<body bgcolor=#FFFFFF>
<layer class="texte" left=10 top=170 width=198 height=250 bgcolor=#000099 clip="0,0,198,2">
contenu du layer de gauche pouvant s'ouvrir
</layer>
<layer class="texte" left=210 top=170 width=198 height=250 bgcolor=#994000 clip="0,0,198,2">
contenu du layer du milieu pouvant s'ouvrir
</layer>
<layer class="texte" left=410 top=170 width=198 height=250 bgcolor=#008000 clip="0,0,198,2">
contenu du layer de droite pouvant s'ouvrir
</layer>
<layer class="entete" left=10 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:ouvreferme(0)">lien gauche</a>
</layer>
<layer class="entete" left=210 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:ouvreferme(1)">lien du milieu</a>
</layer>
<layer class="entete" left=410 top=145 width=198 height=25 bgcolor=#000000>
<a href="javascript:ouvreferme(2)">lien droit</a>
</layer>
</body>
</html>
|
Dans l'exemple, six layer en tout sont définis. Les trois premiers sont ceux qui peuvent s'ouvrir et se refermer. Dans un premier temps, ces layer sont fermés. Ce qui est obtenu grâce à l'attribut clip=. Par cette mention, le passage affiché d'un layer se laisse limiter à souhait. Les layer 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 layer.
Les trois layer 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 layer pouvant être ouverts et refermés. Chaque layer d'entête contient un lien qui lorsqu'on le clique ouvre ou referme le layer placé dessous. Pour cela, une fonction JavaScript est appelée à chaque cliquement sur l'un des liens: la fonction ouvreferme(), définie dans un passage JavaScript de l'entête de fichier.
Dans le passage JavaScript, avant la fonction ouvreferme(), est déjà défini un array comprenant trois valeurs: l' array Status. Ses trois valeurs sont initialisées avec la valeur de départ "ferme". Étant donné que cette array est défini en dehors de toute fonction, ses données sont toujours disponibles.
Dans la fonction ouvreferme(), il est vérifié si un layer est actuellement ouvert ou fermé. Pour cela, la fonction reçoit à son appel le paramètre LayNum. C'est le numéro d'index du layer qui doit être ouvert ou fermé. Étant donné que dans l'exemple, les trois premiers layer seront concernés, seuls les numéros d'index 0, 1 et 2 sont valables. À l'appel de la fonction dans les trois layer du bas, ce sont exactement ces trois valeurs qui sont transmises. Avec la requête if(Status[LayerNum] == "ferme") la fonction ouvreferme()compare ce que contient l'array Status comme valeur pour le numéro d'index transmis. Si c'est la valeur "ferme" qui s'y trouve, le layer est ouvert. Quand il est ouvert, la valeur dans l'array est fixée à "ouvert". Ainsi la fonction arrive-t-elle lors de la requête suivante pour le même layer à 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 layer est modifiée de façon dynamique avec document.layers[LayerNum].clip.bottom=. Les valeurs limites de 2 et 250 sont liées aux layer définis: 2 est la valeur qu'on trouve dans les mentions clip="0,0,198,2", et 250 est la hauteur des layer 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 layer 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 en dynamique les contenus de layerL'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 layer de Netscape, tout au moins "reproduire". La raison en est que Netscape traite le layer 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 layer et quelles possibilités s'ouvrent ainsi.
<html>
<head>
<title>Titre du fichier</title>
<script language="JavaScript">
<!--
function ecriredonnee()
{
var texte = document.Input.document.entree.champ.value;
var longueur = document.Input.document.entree.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>Le texte a une longueur de ");
document.Output.document.write("<b>" + longueur + " caractères</b></p>");
document.Output.document.close();
}
//-->
</script>
</head>
<body bgcolor=#FFFFFF>
<layer id="Input" bgcolor=#EEEEFF style="padding:5mm"
left=10 top=140 width=280 height=280>
<p>Entrez du texte dans le champ puis cliquez sur "interaction"</p>
<form name="entree">
<textarea name="champ" cols=25 rows=6 wrap=virtual></textarea><br>
<input type="button" value="interaction" width=221 onClick="ecriredonnee()">
</form>
</layer>
<layer id="Output" left=310 top=145 width=280 height=280>
</layer>
</body>
</html>
|
Dans l'exemple sont définis deux layer: l'un avec le nom (id) Input (entrée) et l'autre avec le nom Output (sortie). Les deux layer sont positionnés de telle façon que le layer pour la sortie apparaîsse à côté du layer pour l'entrée. Au début cependant, le layer pour la sortie ne reçoit aucun contenu. En revanche, dans le layer 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 ecriredonnee(), 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 layer 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 layer, 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 layer, 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 layer. Par son nom, le layer est adressé. Mais un layer 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 layer correspondant. Les éléments contenus dans les layer 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.entree.champ.value (document.entree.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 layer.
|
|
Simuler les Layer sans repère <layer>Sous 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 layer.
<html>
<head>
<title>Titre du fichier</title>
<script language="JavaScript">
<!--
function montrer()
{
document.afficheimage.visibility = "show";
document.lienmontrer.visibility = "hide";
document.liencacher.visibility = "show";
}
function cacher()
{
document.afficheimage.visibility = "hide";
document.liencacher.visibility = "hide";
document.lienmontrer.visibility = "show";
}
//-->
</script>
</head>
<body bgcolor=#FFFFFF>
<div id="lienmontrer"
style="position:absolute; left:100; top:140; width:400; height:30; visibility:show">
<a href="javascript:montrer()"><b>afficher l'image</b></a>
</div>
<div id="liencacher"
style="position:absolute; left:100; top:140; width:400; height:30; visibility:hide">
<a href="javascript:cacher()"><b>cacher l'image</b></a>
</div>
<div id="afficheimage"
style="position:absolute; left:100; top:170; width:400; height:230; visibility:hide">
<img src="image.jpg" width=91 height=177 border=0>
</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. Sans de telles mentions, un accès dynamique à l'élément correspondant n'est pas possible pour Netscape.
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 passage 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.lienmontrer.visibility="hide".
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 id= 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>. Dans la pratique, cependant, parviennent fréquemment des problèmes qui n'apparaissent pas avec l'utilisation de layer.
|
|
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>Titre du fichier</title>
<style type="text/css">
layer { font-size:10pt; font-family:Arial }
layer.entete { color:#FFFFFF; padding:1mm; cursor:hand; }
layer.texte { color:#000000; padding-top:30px; padding-left:1mm; padding-right:1mm }
</style>
</head>
<body bgcolor=#FFFFFF>
<layer id="vert" class="texte" bgcolor=#99FF99 top=170 left=10 width=200 height=180>
<layer id="entetevert" class="entete" bgcolor=#000000 top=0 left=0 width=200 height=25>
barre de titre du layer vert</layer>
contenu du layer vert.
</layer>
<layer id="jaune" class="texte" bgcolor=#FFFF66 top=10 left=310 width=300 height=120>
<layer id="entetejaune" class="entete" bgcolor=#000000 top=0 left=0 width=300 height=25>
barre de titre du layer jaune</layer>
contenu du layer jaune.
</layer>
<script language="JavaScript">
<!--
var vert = document.layers['vert'];
var titrevert = document.layers['vert'].document.layers['entetevert'].document;
var jaune = document.layers['jaune'];
var titrejaune = document.layers['jaune'].document.layers['entetejaune'].document;
titrevert.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
titrevert.onmousedown=departvert;
titrevert.onmouseup=finvert;
document.layers['vert'].document.layers['entetevert'].onload=initvert;
titrejaune.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG);
titrejaune.onmousedown=departjaune;
titrejaune.onmouseup=finjaune;
document.layers['jaune'].document.layers['entetejaune'].onload=initjaune;
function initvert()
{ titrevert.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function initjaune()
{ titrejaune.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEDRAG); }
function departvert()
{ titrevert.captureEvents(Event.MOUSEMOVE); titrevert.onmousemove=tirevert; }
function departjaune()
{ titrejaune.captureEvents(Event.MOUSEMOVE); titrejaune.onmousemove=tirejaune; }
function tirevert(evenem)
{ vert.left = evenem.pageX; vert.top = evenem.pageY; }
function tirejaune(evenem)
{ jaune.left = evenem.pageX; jaune.top = evenem.pageY; }
function finvert()
{ titrevert.onmousemove=0; titrevert.releaseEvents(Event.MOUSEMOVE); }
function finjaune()
{ titrejaune.onmousemove=0; titrejaune.releaseEvents(Event.MOUSEMOVE); }
//-->
</script>
</body>
</html>
|
Dans l'exemple ont été définis en tout quatre layer dont deux "externes" (avec id="vert" et id="jaune"), et pour chacun d'entre eux un layer "interne" (avec id="entetevert" et id="entetejaune"). Les layer internes sont structurés de telle façon qu'ils semblent être les barres de titre des deux layer externes - d'où le nom id qui leur a été affecté.
Comme vous pouvez le voir, aucun appel JavaScript ne figure ni dans la définition du layer ni dans un des layer. 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 layer "externe" qui en fait partie bouge avec. Cela s'explique par le concept de l'objet Event: celui-ci n'a pas besoin d'Event-Handler 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 layer parce que dés sa lecture son code est exécuté et qu'il se réfère aux layer définis. Les layer 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 layer 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
(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 titrevert.onmousedown=departvert la fonction departvert() é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 layer vert: l'évènement MOUSEDOWN pour titrevert est alors signalé. Pour ce cas (onmousedown), la fonction departvert 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 tirevert. 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 evenem 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 tirevert, un tel nom est indispensable. La fonction tirevert 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 evenem sont actualisées "aussi souvent que possible". Ces valeurs sont affectées de façon dynamique au layer 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 tirevert 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 finvert qui est appelée. Cette fonction contient deux instructions pour "ranger".
Si vous n'entrepreniez rien d'autre, le layer 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 initvert. Cette fonction démarre une nouvelle surveillance des évènements.
La façon de procéder pour le layer jaune est analogue à celle du layer vert.
|
|
Scripts Inline pour les layerNetscape propose une syntaxe JavaScript simplifiée pour modifier à l'intérieur d'un layer ses propriétés de façon dynamique.
<html>
<head>
<title>Titre du fichier</title>
<style type="text/css">
layer { padding:1mm; }
p.lien{ font-size:10pt; font-weight:bold; font-family:Arial; color:yellow; }
p.texte { font-size:10pt; font-family:Arial; color:white; }
</style>
</head>
<body bgcolor=#FFFFFF>
<layer 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="texte">Ici se trouve ce que vous avez déjà toujours voulu savoir.</p>
<script language="JavaScript">
<!--
function montrer() { clip.bottom = 200; }
function cacher() { clip.bottom = 25; }
//-->
</script>
</layer>
</body>
</html>
|
Dans l'exemple est défini un layer. Cependant, avec une mention relative à clip=, le domaine d'affichage du layer 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 layer, la fonction JavaScript montrer() est appelée. Celle-ci modifie le domaine Clip de telle façon que le layer est affiché complètement. Si la souris quitte à nouveau le domaine du layer, 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 layer. Ensuite, vous n'avez pas besoin de vous soucier de l'adressage correct du layer 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 layer. Pour les propriétés que vous pouvez modifier, consultez la référence de l'objet layers.
|
| |
après: |
Affichage de la date et de l'heure
|
avant: |
Feuilles de style JavaScript JSSS (Netscape)
|
SELFHTML/Quickbar
HTML dynamique
Les apports de Microsoft et de Netscape
Serge François, 13405@free.fr
