SELFHTML

layers

Page d'information: vue d'ensemble

vers le bas layers: généralités sur l'utilisation

Propriétés:

vers le bas above (calque posé au dessus)
vers le bas background (image d'arrière plan d'un calque)
vers le bas bgColor (couleur d'arrière plan d'un calque)
vers le bas below (calque posé au dessous)
vers le bas clip (domaine d'affichage d'un calque)
vers le bas document (objet document d'un calque)
vers le bas left (valeur de gauche du coin supérieur gauche relative)
vers le bas length (nombre de calques)
vers le bas name (nom d'un calque)
vers le bas pageX (valeur de gauche du coin supérieur gauche absolue)
vers le bas pageY (valeur du haut du coin supérieur gauche absolue)
vers le bas parentLayer (objet du calque parent)
vers le bas siblingAbove (objet du calque posé au dessus)
vers le bas siblingBelow (objet du calque posé au dessous)
vers le bas src (fichier externe d'un calque)
vers le bas top (valeur du haut du coin supérieur gauche relative)
vers le bas visibility (visibilité d'un calque)
vers le bas zIndex (position de la couche d'un calque)

Méthodes:

vers le bas captureEvents() (surveiller des événements)
vers le bas handleEvent() (traiter des événements)
vers le bas load() (charger un fichier externe)
vers le bas moveAbove() (poser sur un autre calque)
vers le bas moveBelow() (poser sous un autre calque)
vers le bas moveBy() (déplacer d'un nombre de pixels)
vers le bas moveTo() (déplacer relativement à une position)
vers le bas moveToAbsolute() (déplacer à une position de façon absolue)
vers le bas releaseEvents() (terminer la surveillance d'événements)
vers le bas resizeBy() (modifier la largeur et la hauteur d'un nombre de pixels)
vers le bas resizeTo() (fixer la largeur et la hauteur à un nombre de pixels)
vers le bas routeEvent() (parcourt la hiérarchie Event-Handler)

 vers le bas 

layers: généralités sur l'utilisation

Avec l'objet layers, qui se situe sous l'objet Autre page d'information 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 Autre page d'information positionnement dynamique (Netscape 4.x) (Vous trouverez aussi d'autres exemples en vous y référant).

Important:

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.

Travailler avec l'objet layers:

Un nouvel objet layers est créé automatiquement quand le navigateur WWW trouve un Chapitre: vue d'ensemble calque dans le fichier HTML.

Les manières suivantes sont à votre disposition pour adresser un calque déterminé avec JavaScript:

Schéma 1 / exemple 1:

document.layers[#].propriété
document.layers[#].méthode()

couleur = document.layers[0].bgColor;

Schéma 2 / exemple 2:

document.nom_calque.propriété
document.nom_calque.méthode()

Farbe = document.passage_entete.bgColor;

Explication:

Vous pouvez adresser les objets calques de deux façons:

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0Lesen above

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture background

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture bgColor

Sauvegarde la couleur d'arrière plan d'un calque.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

Attention:

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).

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture below

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture clip

Sauvegarde 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).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 document

Chaque 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 Autre page d'information 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

Attention:

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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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é Autre page d'information src.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture left

Sauvegarde 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 vers le bas pageX.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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).

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0Lesen length

Sauvegarde le nombre de calques d'un fichier.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

L'exemple contient quelques calques pour la démonstration et écrit ensuite dans le fichier avec Autre page d'information document.write() le nombre de calques définis.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture name

Sauvegarde le nom d'un calque.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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=.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture pageX

Sauvegarde 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).

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture pageY

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 parentLayer

Sauvegarde l'objet parent d'un calque. Cela peut être soit l'objet Autre page d'information window, soit, au cas où le calque est défini à l'intérieur d'un autre calque, ce calque parent.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 siblingAbove

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 siblingBelow

Sauvegarde 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture src

Sauvegarde le fichier externe incorporé dans un calque.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture top

Sauvegarde 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 vers le haut pageY.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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).

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture visibility

Sauvegarde si un calque est visible ou non.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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).

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0lecture/écriture zIndex

Sauvegarde la position de la couche d'un calque.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 captureEvents()

Surveille les événements utilisateur dans un calque. Fonctionne exactement comme Autre page d'information 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...).

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 handleEvent()

Transmet un événement à un élément en mesure de réagir à cet événement. Fonctionne exactement comme Autre page d'information 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 vers le haut window.document.nom_calque.captureEvents().

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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.

Attention:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 moveToAbsolute()

Fonctionne exactement comme vers le haut 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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 releaseEvents()

Termine la surveillance d'événements utilisateur. Fonctionne exactement comme Autre page d'information 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 vers le haut document.nom_calque.captureEvents().

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

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

Explication:

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 Autre page d'information 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.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 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 Autre page d'information 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.

 vers le haut
page suivante Autre page d'information links
page précédente Autre page d'information images
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org