SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
layers |
|
Propriétés:
Méthodes:
|
 | |
Avec l'objet layers, qui se situe sous l'objet 
document dans la hiérarchie objet JavaScript, vous avez accès à tous les calques définis dans un fichier HTML. Cet objet est - comme pour les repères HTML correspondants - spécifique à Netscape. Il est la base pour le positionnement dynamique (Netscape 4.x) (Vous trouverez aussi d'autres exemples en vous y référant).
l'objet layers n'est plus soutenu par Netscape à partir de la version 6.0. Il ne doit donc être employé que pour des raisons de compatibilité vers l'amont avec Netscape 4.x.
layers:Un nouvel objet layers est créé automatiquement quand le navigateur WWW trouve un 
calque dans le fichier HTML.
Les manières suivantes sont à votre disposition pour adresser un calque déterminé avec JavaScript:
document.layers[#].propriété document.layers[#].méthode() couleur = document.layers[0].bgColor; |
document.nom_calque.propriété document.nom_calque.méthode() Farbe = document.passage_entete.bgColor; |
Vous pouvez adresser les objets calques de deux façons:
document.layers, entre crochets, du numéro d'ordre du calque que vous voulez adresser dans le fichier. Chaque calque, qui a été noté avec <layer> ou avec le repère <ilayer> dans le fichier HTML, compte. Pensez que le compteur commence à 0, c'est à dire qu'il vous faut adresser le premier calque avec layers[0], le deuxième avec layers[1] etc... Pour compter, prévaut l'ordre dans lequel les commandes <layer>/<ilayer> sont notées dans le fichier.document.nom_calque le nom du calque que vous avez mentionné lors de la définition du calque dans les repères <layer>/<ilayer> HTML correspondants dans l'attribut name=.
 |
aboveSauvegarde quel autre calque se trouve sur un calque: la propriété above retourne l'objet layers du calque placé au dessus. Vous devez donc encore ajouter une propriété comme name pour en apprendre plus sur le calque.
<html><head><title>Test</title> </head><body> <layer name="calque_jaune" top="100" left="50" height="200" bgcolor="#FFFFE0"> Contenu du calque jaune </layer> <layer top="150" name="calque_lilas" left="100" height="200" bgcolor="#FFE0FF"> Contenu du calque lilas </layer> <a href="javascript:alert(document.calque_jaune.above.name)"> Qui se trouve sur le calque jaune?</a><br> <a href="javascript:alert(document.calque_jaune.above.top)"> Et où commence-t-il?</a><br> </body></html> |
Dans l'exemple sont définis deux calques nommés calque_jaune et calque_lilas. En outre, deux liens sont notés. Cliquer sur le premier d'entre eux annonce le nom du calque placé sur le calque jaune (document.calque_jaune.above.name), l'autre lien annonce sa position en partant du haut (document.calque_jaune.above.top). C'est le calque lilas qui est posé sur le calque jaune, étant donné que le calque lilas est défini après le calque jaune dans le fichier.
|
|
backgroundSauvegarde l'image d'arrière plan (papier peint) d'un calque. L'exemple suivant montre comment vous pouvez, de façon dynamique, changer une telle image d'arrière plan.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nouvelle_image = new Image();
nouvelle_image.src = "retour02.gif";
function arriere_plan() {
document.calque_test.background.src="retour02.gif";
}
//-->
</script>
</head><body>
<layer background="retour03.gif" top="150" name="calque_test"
left="100" height="200" bgcolor="#FFE0FF">
contenu du calque
</layer>
<a href="javascript:arriere_plan()">autre arrière-plan</a>
</body></html>
|
Dans l'exemple, un calque est défini avec une image d'arrière plan. En cliquant sur le lien, l'image d'arrière plan est modifiée par une autre de façon dynamique. Veillez, pour ce faire, que dans le passage JavaScript de l'entête de fichier, l'image d'arrière plan qui doit remplacer l'autre de façon dynamique soit enregistrée dés la lecture du fichier à l'aide de l'objet images.
En cliquant sur le lien, la fonction arriere_plan(), qui modifie l'image d'arrière plan de façon dynamique, est appelée. Derrière l'adressage du calque, il vous faut noter background.src et affecter à cette expression le graphique enregistré auparavant.
|
|
bgColorSauvegarde la couleur d'arrière plan d'un calque.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var couleur="aqua";
function arriere_plan() {
if(document.calque_test.bgColor=="aqua")
{ document.calque_test.bgColor="yellow"; return; }
else
{ document.calque_test.bgColor="aqua"; return; }
}
//-->
</script>
</head><body>
<layer top="150" name="calque_test" left="100" height="200" bgcolor="aqua">
contenu du calque
</layer>
<a href="javascript:arriere_plan()">autre arrière-plan</a>
</body></html>
|
Dans l'exemple, un calque a été défini. En cliquant sur le lien, la fonction arriere_plan(), notée dans un passage JavaScript de l'entête de fichier, est appelée. Cette fonction demande quelle est la couleur d'arrière plan actuelle du calque et lui en affecte une autre.
Vous ne pouvez pas interroger la couleur d'arrière plan d'un calque étant donné que Netscape 4 renvoyait des valeurs de bgColor étranges qui ne figuraient pas dans le dans le schéma de la documentation Netscape (mentions hexadécimales ou noms de couleurs).
|
|
belowSauvegarde quel autre calque se trouve sous un calque. La propriété below retourne l'objet layers du calque placé au dessous. Vous devez donc encore ajouter une propriété comme name pour en apprendre plus sur le calque.
<html><head><title>Test</title> </head><body> <layer name="calque_jaune" top="100" left="50" height="200" bgcolor="#FFFFE0"> contenu du calque jaune </layer> <layer top="150" name="calque_lilas" left="100" height="200" bgcolor="#FFE0FF"> contenu du calque lilas </layer> <a href="javascript:alert(document.calque_lilas.below.name)">Qui est sous le calque lilas?</a><br> <a href="javascript:alert(document.calque_lilas.below.left)">et où commence-t-il?</a><br> </body></html> |
Dans l'exemple sont définis deux calques nommés calque_jaune et calque_lilas. En outre, deux liens sont notés. Cliquer sur le premier d'entre eux annonce le nom du calque placé sous le calque lilas (document.calque_lilas.below.name), l'autre lien annonce sa position en partant de la gauche (document.calque_jaune.below.left). C'est le calque jaune qui est posé le calque lilas, étant donné que le calque jaune est défini avant le calque lilas dans le fichier.
|
|
clipSauvegarde quel extrait d'un calque est affiché. Il existe les sous-propriétés suivantes:
clip.top sauvegarde la valeur en pixels en haut du coin supérieur gauche du passage visible du calque,
clip.left sauvegarde la valeur en pixels à gauche du coin supérieur gauche du passage visible du calque,
clip.bottom sauvegarde la valeur en pixels en bas du coin inférieur droit du passage visible du calque,
clip.right sauvegarde la valeur en pixels à droite du coin inférieur droit du passage visible du calque,
clip.width sauvegarde la largeur du passage visible du calque (mention alternative à une mention d'un coin inférieur droit),
clip.height sauvegarde la hauteur du passage visible du calque (mention alternative à une mention d'un coin inférieur droit).
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function reduit()
{
with(document.mon_calque)
{
if(clip.height > 0 && clip.width > 0)
{ clip.height-=10; clip.width-=10; }
}
}
function augmente()
{
with(document.mon_calque)
{
if(clip.height < 200 && clip.width < 200)
{ clip.height+=10; clip.width+=10; }
}
}
//-->
</script>
</head><body>
<layer name="mon_calque" top="80" left="80" height="200" width="200" bgcolor="#FFFFE0">
contenu du calque
</layer>
<a href="javascript:reduit()">plus petit</a><br>
<a href="javascript:augmente()">plus grand</a>
</body></html>
|
Dans l'exemple, un calque est défini. Étant donné que dans la définition HTML aucune mention du passage clip du calque n'a été faite, c'est le calque complet qui est affiché. Ses valeurs clip s'obtiennent à partir de la taille du calque. Les valeurs internes de clip.top et clip.left sont donc égales à 0, et clip.width, clip.height, clip.bottom et clip.right ont tous une valeur de 200, parce que cela résulte des mentions height=200 width=200 de la définition HTML du calque.
À l'aide des deux liens de l'exemple, il est possible de réduire et d'agrandir à nouveau le domaine d'affichage visible du calque. Les liens appellent les fonctions reduit() ou augmente(), qui sont notées dans le passage JavaScript de l'entête de fichier. La fonction reduit() demande si clip.width et clip.height sont plus grands que 0. Si oui, les deux valeurs seront réduites de 10, coupant ainsi le domaine d'affichage de 10pixels à partir du bas à droite. La fonction augmente() fait simplement le contraire.
|
|
documentChaque calque est traité par Netscape comme un petit document distinct. C'est pourquoi existe aussi pour les calques un objet document qui fonctionne exactement comme l'objet global document. Ainsi vous avez accès à des sous objets du document comme graphiques, formulaires etc... Pour adresser de tels éléments contenus dans un calque, vous devez adresser les éléments par l'objet document propre au calque.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function autre_contenu()
{
document.mon_calque.document.open();
document.mon_calque.document.write("Maintenant le lien est parti!");
document.mon_calque.document.close();
}
//-->
</script>
</head><body>
<layer name="mon_calque" bgcolor="#FFFFE0">
<a href="javascript:autre_contenu()">écrire sur ce lien</a>
</layer>
</body></html>
|
Dans l'exemple, un calque est défini. Il contient un lien qui, lorsqu'on le clique, appelle la fonction autre_contenu() notée dans un passage JavaScript de l'entête de fichier. Cette fonction utilise des méthodes typiques de l'objet document telles open(), write() et close(). Ce qu'il y a de particulier, c'est qu'il ne s'agit pas du document global mais du document que représente le calque. Ce qui s'obtient par un adressage tel que document.mon_calque.document.
Le modèle de document du calque chez Netscape a également des répercussions sur les formulaires, graphiques ou liens définis dans le document HTML.. Tenez compte ici que tous les éléments qui se trouvent dans un calque font partie du document du calque et non pas du document HTML.
<html><head><title>Test</title>
</head><body>
<layer name="mon_calque" bgcolor="#FFFFE0" left="300">
<img src="bleu.gif" width="104" height="102" border="0" alt="">
</layer>
<script type="text/javascript">
<!--
document.write("Nombre d'images dans le document HTML: " + document.images.length);
document.write("<br>Nombre d'images dans le calque: " +
document.mon_calque.document.images.length);
//-->
</script>
</body></html>
|
Dans l'exemple un calque est défini, il contient un graphique. Le fichier ne contient pas d'autres images. Ensuite vient un passage JavaScript qui sort le nombre d'images dans le document et dans le calque avec la méthode document.write . Au vu de l'exemple, vous constatez que seul le document du calque contient un graphique. Avec un adressage comme document.mon_calque.document vous pouvez adresser ce graphique et modifier par exemple sa propriété src.
|
|
leftSauvegarde la valeur en pixels de la partie située à gauche du coin supérieur gauche d'un calque par rapport au document hiérarchiquement supérieur. Cela peut être: soit le document global, soit un calque à l'intérieur duquel le calque actuel serait défini. Pour une référence absolue voir pageX.
<html><head><title>Test</title> </head><body> <layer name="Super_calque" left="100"> <layer name="petit_calque" left="200" width="300" bgcolor="#FFFFE0"> <a href="javascript:alert(document.Super_calque.document.petit_calque.left)">valeur de gauche?</a> </layer> </layer> </body></html> |
L'exemple présente, contenu dans un autre calque, un calque commençant à la position 200 en pixels à partir de la gauche, avec un lien. En cliquant sur ce lien la valeur gauche du calque intérieur est sortie. Elle est donc de 200, bien que le calque commence optiquement à la position 300 (ceci parce que le calque parent commence déjà à 100 et que les 200 du calque intérieur y sont ajoutés).
|
|
lengthSauvegarde le nombre de calques d'un fichier.
<html><head><title>Test</title>
</head><body>
<layer></layer>
<layer></layer>
<layer></layer>
<layer></layer>
<script type="text/javascript">
<!--
document.write("sur cette page, il y a " + document.layers.length + " calques");
//-->
</script>
</body></html>
|
L'exemple contient quelques calques pour la démonstration et écrit ensuite dans le fichier avec document.write() le nombre de calques définis.
|
|
nameSauvegarde le nom d'un calque.
<html><head><title>Test</title> </head><body> <layer name="petit_calque" bgcolor="#FFFFE0"> <a href="javascript:alert(document.petit_calque.name)">Quel est mon nom?</a> </layer> </body></html> |
L'exemple contient un calque avec un lien. En cliquant sur le lien, le nom du calque est sorti dans une boite de dialogue. C'est le nom qui est mentionné en HTML avec l'attribut name=.
|
|
pageXSauvegarde la valeur en pixels de la partie située à gauche du coin supérieur gauche d'un calque par rapport au document global (même si le calque actuel est défini à l'intérieur d'un autre calque).
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function gauche()
{
document.petit_calque.pageX = 0;
}
//-->
</script>
</head><body>
<layer name="petit_calque" left="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:gauche()">vers la gauche avec ce calque</a>
</layer>
</body></html>
|
L'exemple contient un calque commençant à la position 300 en pixels à partir de la gauche. Le calque contient un lien. En cliquant sur ce lien, la fonction gauche(), notée dans un passage JavaScript de l'entête de fichier est appelée. Cette fonction modifie la valeur gauche du calque en 0, de telle sorte que le calque commence ensuite tout à fait à gauche.
|
|
pageYSauvegarde la valeur en pixels pour la partie située en haut du coin supérieur gauche d'un calque par rapport au document global, même si le calque actuel est défini à l'intérieur d'un autre calque.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function vers_haut()
{
document.petit_calque.pageY = 0;
}
//-->
</script>
</head><body>
<layer name="petit_calque" top="300" width="300" bgcolor="#FFFFE0">
<a href="javascript:vers_haut()">vers le haut avec ce calque</a>
</layer>
</body></html>
|
L'exemple contient un calque, commençant à la position 300 pixels à partir du haut. Le calque contient un lien. En cliquant sur ce lien, la fonction vers_haut(), notée dans un passage JavaScript de l'entête de fichier, est appelée. Cette fonction modifie la valeur pour la hauteur du calque en 0, de telle sorte que le calque commence ensuite tout à fait en haut.
|
|
parentLayerSauvegarde l'objet parent d'un calque. Cela peut être soit l'objet window, soit, au cas où le calque est défini à l'intérieur d'un autre calque, ce calque parent.
<html><head><title>Test</title>
</head><body>
<layer name="Super_calque">
<layer name="petit_calque" bgcolor="#FFFFE0">
<a href="javascript:alert(document.Super_calque.document.petit_calque.parentLayer.name)">
nom du parent?</a>
</layer>
</layer>
</body></html>
|
L'exemple contient un calque contenu dans un autre calque. En cliquant sur le lien défini dans le calque intérieur, le nom de l'objet parent est sorti. Étant donné que l'objet parent est dans ce cas le calque plus élevé dans la hiérarchie, c'est le nom de ce dernier qui est sorti - à savoir Super_calque.
|
|
siblingAboveSauvegarde le calque qui, en raison de la position de la couche fixée en HTML avec z-index=, est posé sur le calque adressé. Il s'agit là d'un objet layers pour lequel toutes les propriétés et méthodes disponibles s'appliquent.
<html><head><title>Test</title> </head><body> <layer name="L1" left="100" top="100" z-index="3" bgcolor="#FFFFE0">contenu du calque L1</layer> <layer name="L2" left="120" top="120" z-index="1" bgcolor="#FFFFD0">contenu du calque L2</layer> <layer name="L3" left="140" top="140" z-index="4" bgcolor="#FFFFC0">contenu du calque L3</layer> <layer name="L4" left="140" top="140" z-index="2" bgcolor="#FFFFB0">contenu du calque L4</layer> <layer name="L5" left="100" top="180"> <a href="javascript:alert(document.L1.siblingAbove.name)">L1 siblingAbove</a><br> <a href="javascript:alert(document.L2.siblingAbove.name)">L2 siblingAbove</a><br> <a href="javascript:alert(document.L3.siblingAbove.name)">L3 siblingAbove</a><br> <a href="javascript:alert(document.L4.siblingAbove.name)">L4 siblingAbove</a><br> </layer> </body></html> |
L'exemple définit cinq calques en tout. Le calque défini en dernier contient quatre liens. Chaque lien donne, pour chacun des quatre premiers calques, le nom du calque qui en raison de l'ordre z-index est posé dessus. Si on clique par exemple sur le premier lien sera sorti, pour le calque du nom de L1, le nom du calque posé sur lui. C'est dans ce cas le calque avec le nom L3, étant donné que le calque L1 a une valeur z-index de 3 et que le calque L3 a la valeur immédiatement supérieure, à savoir 4.
|
|
siblingBelowSauvegarde le calque qui, en raison de la position de la couche fixée en HTML avec z-index=, est posé sous le calque adressé. Il s'agit là d'un objet layers pour lequel toutes les propriétés et méthodes disponibles s'appliquent.
<html><head><title>Test</title> </head><body> <layer name="L1" left="100" top="180"> <a href="javascript:alert(document.L2.siblingBelow.name)">L2 siblingBelow</a><br> <a href="javascript:alert(document.L3.siblingBelow.name)">L3 siblingBelow</a><br> <a href="javascript:alert(document.L4.siblingBelow.name)">L4 siblingBelow</a><br> <a href="javascript:alert(document.L5.siblingBelow.name)">L5 siblingBelow</a><br> </layer> <layer name="L2" left="100" top="100" z-index="3" bgcolor="#FFFFE0">contenu du calque L2</layer> <layer name="L3" left="120" top="120" z-index="1" bgcolor="#FFFFD0">contenu du calque L3</layer> <layer name="L4" left="140" top="140" z-index="4" bgcolor="#FFFFC0">contenu du calque L4</layer> <layer name="L5" left="140" top="140" z-index="2" bgcolor="#FFFFB0">contenu du calque L5</layer> </body></html> |
L'exemple définit cinq calques en tout. Le calque défini en premier contient quatre liens. Chaque lien donne, pour chacun des quatre derniers calques, le nom du calque qui en raison du classement z-index se trouve sous le calque adressé. Si par exemple on clique sur le premier lien, sera donné pour le calque nommé L2 le nom de celui situé dessous. C'est en l'occurrence le calque du nom de L5, étant donné que le calque L2 a une valeur z-index de 3 et que le calque L5 a la valeur z-index immédiatement inférieure, à savoir 2.
|
|
srcSauvegarde le fichier externe incorporé dans un calque.
<html><head><title>Test</title>
</head><body>
<layer name="extern" left="50" top="30" width="600" height="200" src="nouveautes.htm">
</layer>
<layer left="50" top="250">
<script type="text/javascript">
<!--
document.write("<hr><b>le fichier incorporé est: <\/b>" + window.document.extern.src);
//-->
</script>
</layer>
</body></html>
|
L'exemple contient deux calques positionnés. Le contenu du premier calque est un fichier externe nommé nouveautes.htm. Dans le deuxième calque, l'adresse exacte du fichier externe est écrite à l'aide de document.write(). Pensez que dans ce cas, il faut utiliser window.document.extern.src pour l'adressage de l'autre calque, étant donné que document.extern.src ne se référerait qu'au calque actuel, et que celui-ci ne contient aucun élément du nom de extern.
|
|
topSauvegarde la valeur en pixels de la partie située en haut du coin supérieur gauche d'un calque par rapport au document hiérarchiquement supérieur. Cela peut être: soit le document global, soit un calque à l'intérieur duquel le calque actuel serait défini. Pour une référence absolue voir pageY.
<html><head><title>Test</title> </head><body> <layer name="Super_calque" top="100"> <layer name="petit_calque" top="200" width="300" bgcolor="#FFFFE0"> <a href="javascript:alert(document.Super_calque.document.petit_calque.top)">valeur du haut?</a> </layer> </layer> </body></html> |
L'exemple présente, contenu dans un autre calque, un calque commençant à la position 200 en pixels à partir du haut, avec un lien. En cliquant sur celui-ci, la valeur pour la hauteur du calque intérieur est sortie. Elle est donc de 200, bien que le calque commence optiquement à la position 300 (ceci parce que le calque parent commence déjà lui-même à 100 et que les 200 du calque intérieur y sont ajoutés).
|
|
visibilitySauvegarde si un calque est visible ou non.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function allume_eteint(nombre)
{
if(window.document.layers[nombre].visibility == "show")
{ window.document.layers[nombre].visibility = "hide"; return; }
if(window.document.layers[nombre].visibility == "hide")
{ window.document.layers[nombre].visibility = "show"; return; }
}
//-->
</script>
</head><body>
<layer name="calque_jaune" left="50" top="30" width="200" height="200"
visibility="show" bgcolor="#FFFFE0">
<a href="javascript:allume_eteint(1)">autre calque allumé/éteint</a>
</layer>
<layer name="calque_lilas" left="250" top="30" width="200" height="200"
visibility="show" bgcolor="#FFE0FF">
<a href="javascript:allume_eteint(0)">autre calque allumé/éteint</a>
</layer>
</body></html>
|
Dans l'exemple sont définis deux calques positionnés. Chacun des deux calques contient un lien. Lorsqu'on le clique, c'est respectivement l'autre calque qui est affiché ou qui disparaît. Pour ce faire est appelée à chaque fois la fonction allume_eteint(), notée dans l'entête du fichier. Comme paramètre est transmis à chaque fois le numéro d'index de l'autre calque. La propriété visibility peut avoir trois valeurs: hide (cacher), show (montrer) et inherit (hérité du calque parent).
|
|
zIndexSauvegarde la position de la couche d'un calque.
<html><head><title>Test</title> </head><body> <layer z-index="527" name="un_calque"> <a href="javascript:alert(window.document.un_calque.zIndex)">z-index?</a> </layer> </body></html> |
Dans l'exemple est défini un calque qui reçoit par l'attribut HTML une valeur z-index de 527. Dans le calque est noté un lien. En cliquant sur ce lien, la valeur z-Index du calque est sortie dans une boite de dialogue.
|
|
captureEvents()Surveille les événements utilisateur dans un calque. Fonctionne exactement comme captureEvents() l'objet window ((s'y référer pour plus d'informations). La seule différence réside dans le fait qu'avec window.document.nom_calque.caputeEvents() vous ne pouvez surveiller que des événements à l'intérieur du domaine du calque, et non pas des événements dans toute la fenêtre d'affichage (à laquelle appartiennent entre autres par exemple la barre de titre, la barre de menus etc...).
|
|
handleEvent()Transmet un événement à un élément en mesure de réagir à cet événement. Fonctionne exactement comme handleEvent() pour l'objet window (s'y référer pour plus d'informations). La seule différence réside dans le fait qu'avec window.document.nom_calque.handleEvent() ne peuvent être transmis que des événements surveillés par window.document.nom_calque.captureEvents().
|
|
load()Charge un fichier externe dans un calque. Attend deux paramètres:
1. source = un fichier (HTML) qui doit être chargé.
2. largeur = largeur d'affichage du calque.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function charge()
{
document.un_calque.load("nouveautes.htm",600);
}
//-->
</script>
</head><body>
<a href="javascript:charge()">charger les nouveautés</a>
<layer name="un_calque" top="50" left="20">
</layer>
</body></html>
|
L'exemple contient un calque vide et un lien qui, lorsqu'on le clique, appelle la fonction charge() notée dans l'entête du fichier. L'instruction dans la fonction utilise la méthode load() sur le calque jusqu'alors vide. Le fichier mentionné nouveautes.htm est alors chargé dans le calque, en se voyant affecter une largeur d'affichage de 600 pixels.
|
|
moveAbove()Pose un calque sur un autre calque. Attend comme paramètre le calque qui doit être couvert. La position de la couche du calque se modifie alors en fonction de celle du calque qui doit être recouvert. Cette méthode n'a rien avoir avec le mouvement de calque.
<html><head><title>Test</title> </head><body> <layer name="calque_jaune" top="150" left="100" width="200" height="200" bgColor="#FFFFE0"> calque jaune<br> <a href="javascript:window.document.calque_jaune.moveAbove(window.document.calque_lilas)"> vers l'avant</a> </layer> <layer name="calque_lilas" top="50" left="250" width="200" height="200" bgColor="#FFE0FF"> calque lilas<br> <a href="javascript:window.document.calque_lilas.moveAbove(window.document.calque_jaune)"> vers l'avant</a> </layer> </body></html> |
Dans l'exemple sont définis deux calques positionnés qui se recouvrent en partie. Tous les deux contiennent chacun un lien, pour que le calque où il se trouve chevauche l'autre.
|
|
moveBelow()Pose un calque sous un autre calque. Attend comme paramètre le calque qui doit couvrir le calque actuel. La position de la couche du calque se modifie alors en fonction de celle du calque qui doit recouvrir le calque actuel. Cette méthode n'a rien avoir avec le mouvement de calque.
<html><head><title>Test</title> </head><body> <layer name="calque_jaune" top="150" left="100" width="200" height="200" bgColor="#FFFFE0"> calque jaune<br> <a href="javascript:window.document.calque_jaune.moveBelow(window.document.calque_lilas)"> vers l'arrière</a> </layer> <layer name="calque_lilas" top="50" left="250" width="200" height="200" bgColor="#FFE0FF"> calque lilas<br> <a href="javascript:window.document.calque_lilas.moveBelow(window.document.calque_jaune)"> vers l'arrière</a> </layer> </body></html> |
Dans l'exemple sont définis deux calques positionnés qui se recouvrent en partie. Tous les deux contiennent chacun un lien, pour que le calque où il se trouve chevauche l'autre.
|
|
moveBy()Déplace un calque du nombre de pixels mentionnés. Attend les paramètres suivants:
1. valeur x = nombre de pixels pour le déplacement vers la gauche/droite du calque. Les valeurs négatives déplacent vers la gauche, les positives vers la droite.
2. valeur y = nombre de pixels pour le déplacement vers le haut/bas du calque. Les valeurs négatives déplacent vers le haut, les positives vers le bas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function sauter()
{
var x = parseInt(document.sauteur.document.saisie.hr.value);
var y = parseInt(document.sauteur.document.saisie.vr.value);
document.sauteur.moveBy(x,y);
}
//-->
</script>
</head><body>
<layer name="sauteur" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
<form name="saisie" action="">
déplace de <input size="5" name="hr"> pixels horizontalement<br>
déplace de <input size="5" name="vr"> pixels verticalement<br>
<input type="button" value="Saute" onClick="sauter()">
</form>
</body></html>
|
Dans l'exemple est défini un calque qui contient un formulaire. Le formulaire met deux petits champs de saisie à disposition, dans lesquels l'utilisateur peut entrer le nombre de pixels pour un déplacement horizontal et vertical du calque. En cliquant sur le bouton qui fait lui aussi partie du formulaire, la fonction sauter(), notée dans l'entête de fichier, est appelée. Cette fonction recherche dans un premier temps les valeurs entrées. Étant donné qu'il s'agit de chaînes de caractères et que la méthode moveBy() attend des nombres, la fonction parseInt() est appelée pour transformer les entrées de formulaire en nombre. Enfin, la méthode moveBy() applique les valeurs trouvées sur le calque.
|
|
moveTo()Déplace un calque à la position mentionnée. Attend les paramètres suivants:
1. valeur x = valeur de gauche pour le nouveau coin supérieur gauche de la fenêtre.
2. valeur y = valeur du haut pour le nouveau coin supérieur gauche de la fenêtre.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function sauter()
{
var x = parseInt(document.sauteur.document.saisie.hr.value);
var y = parseInt(document.sauteur.document.saisie.vr.value);
document.sauteur.moveTo(x,y);
}
//-->
</script>
</head><body>
<layer name="sauteur" top="150" left="100" width="200" height="200" bgColor="#FFFFE0">
<form name="saisie" action="">
coin supérieur gauche nouveau: <input size="5" name="hr"> (de la gauche)<br>
coin supérieur gauche nouveau: <input size="5" name="vr"> (du haut)<br>
<input type="button" value="saute" onClick="sauter()">
</form>
</body></html>
|
Dans l'exemple est défini un calque qui contient un formulaire. Le formulaire met deux petits champs de saisie à disposition dans lesquels l'utilisateur peut entrer les valeurs x et y, coordonnées du nouveau coin supérieur gauche désiré. En cliquant sur le bouton qui fait lui aussi partie du formulaire, la fonction sauter(), notée dans l'entête de fichier, est appelée. Cette fonction recherche dans un premier temps les valeurs entrées. Étant donné qu'il s'agit de chaînes de caractères et que la méthode moveTo() attend des nombres, la fonction parseInt() est appelée pour transformer les entrées de formulaire en nombres. Enfin, la méthode moveTo() applique les valeurs trouvées sur le calque.
Si le calque sur lequel vous appliquez la méthode moveTo() se trouve dans un autre calque, Les mentions sont alors relatives au calque extérieur. Une mention telle que moveTo(0,0) placerait donc le calque dans le coin supérieur gauche du calque extérieur.
|
|
moveToAbsolute()Fonctionne exactement comme moveTo(), à la différence près que les valeurs x et y sont interprétées de manière absolue par rapport à la fenêtre d'affichage, dans le cas où le calque se trouve dans un autre calque.
|
|
releaseEvents()Termine la surveillance d'événements utilisateur. Fonctionne exactement comme releaseEvents() pour l'objet window (s'y référer pour plus d'informations). La seule différence réside dans le fait qu'avec document.nom_calque.releaseEvent() ne peuvent être terminées que des surveillances d'événements commencées avec document.nom_calque.captureEvents().
|
|
resizeBy()Modifie la taille d'un calque d'un nombre donné de pixels vers le bas et la droite. Attend les paramètres suivants:
1. valeur x = nombre de pixels pour la réduction/l'agrandissement du calque vers la droite. Les valeurs négatives réduisent, les positives agrandissent.
2. valeur y = nombre de pixels pour la réduction/l'agrandissement du calque vers le bas. Les valeurs négatives réduisent, les positives agrandissent.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function reduit() {
document.mon_calque.resizeBy(-20,-10);
}
function augmente() {
document.mon_calque.resizeBy(20,10);
}
//-->
</script>
</head><body>
<layer name="mon_calque" top="50" left="50" width="200" height="100" bgColor="#FFFFE0">
<a href="javascript:reduit()">plus petit</a><br>
<a href="javascript:augmente()">plus grand</a><br>
</layer>
</body></html>
|
Dans l'exemple est défini un calque. À l'aide de deux liens, il est possible de réduire ou d'agrandir à nouveau le domaine d'affichage du calque. Les liens appellent les fonctions reduit() ou augmente() qui sont notées dans un passage JavaScript de l'entête de fichier.
La fonction reduit() diminue la largeur du calque de 20 pixels et la hauteur de 10 pixels, la fonction augmente() fait l'inverse.
|
|
resizeTo()Fixe à nouveau la largeur et la hauteur d'un calque. Attend les paramètres suivants:
1. valeur x = nouvelle largeur du calque.
2. valeur y = nouvelle hauteur du calque.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function modifier()
{
var x = parseInt(document.L.document.saisie.hr.value);
var y = parseInt(document.L.document.saisie.vr.value);
document.L.resizeTo(x,y);
}
//-->
</script>
</head><body>
<layer name="L" top="50" left="50" width="200" height="200" bgColor="#FFFFE0">
<form name="saisie" action="">
nouvelle <input size="5" name="hr"> largeur<br>
nouvelle <input size="5" name="vr"> hauteur<br>
<input type="button" value="modifier" onClick="modifier()">
</form>
</body></html>
|
Dans l'exemple est défini un calque qui contient un formulaire. Le formulaire met deux petits champs de saisie à disposition dans lesquels l'utilisateur peut entrer les nouvelles largeur et hauteur désirées pour le calque. En cliquant sur le bouton qui fait lui aussi partie du formulaire, la fonction modifier() notée dans l'entête de fichier est appelée. Cette fonction recherche dans un premier temps les valeurs entrées. Étant donné qu'il s'agit de chaînes de caractères et que la méthode resizeTo() attend des nombres, la fonction parseInt() est appliquée pour transformer les entrées de formulaire en nombre. Enfin la méthode resizeTo() applique les valeurs trouvées au calque.
|
|
routeEvent()Transmet un événement utilisateur à l'objet document. De là, l'événement est transmis toujours plus loin vers le bas jusqu'à ce qu'il trouve un gestionnaire d'événement qui traite l'événement. Fonctionne exactement comme routeEvent() pour l'objet window (s'y référer pour plus d'informations). La seule différence réside dans le fait que document.nom_calque.routeEvent() ne s'applique pas au niveau de la fenêtre mais au niveau du calque.
|
| |
 |
links
|
 |
images
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
