SELFHTML: JavaScript / Référence objet JavaScript / layers

SELFHTML/Quickbar JavaScript Référence objet

layers

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

Propriétés:

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

Méthodes:

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

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

Avec l'objet layers, qui se situe sous l'objet document dans la hiérarchie objet JavaScript, vous avez accès à tous les layer 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) (Vous trouverez aussi d'autres exemples en vous y référant).

Un nouvel objet layers est créé automatiquement quand le navigateur WWW trouve un layer dans le fichier HTML.

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

Schéma 1 / exemple 1:

document.layers[#].propriete
document.layers[#].methode()

couleur = document.layers[0].bgColor;

Schéma 2 / exemple 2:

document.nomlayer.propriete
document.nomlayer.methode()

couleur = document.entete.bgColor;

Explication:

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

avec un numéro d'index (comme dans le schéma 1 /exemple 1)
Pour l'utilisation de numéros d'index, mentionnez document.layers suivi, entre crochets, du numéro d'ordre du layer que vous voulez adresser dans le fichier. Chaque layer, 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 layer 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.
avec le nom du layer (comme dans le schéma 2 /exemple 2)
Pour cela, mentionnez avec document.nomlayer le nom du layer que vous avez mentionné lors de la définition du layer dans les repères <layer>/<ilayer> HTML correspondants dans l'attribut name=.

above

Sauvegarde quel autre layer se trouve sur un layer: la propriété above retourne l'objet layers du layer placé au dessus. Vous devez donc encore ajouter une propriété comme name pour en apprendre plus sur le layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="layerjaune" top=100 left=50 height=200 bgcolor=#FFFFE0>
contenu du layer jaune
</layer>
<layer top=150 name="layerlilas" left=100 height=200 bgcolor=#FFE0FF>
contenu du layer lilas
</layer>
<a href="javascript:alert(document.layerjaune.above.name)">
Quel layer est placé sur le layer jaune?</a><br>
<a href="javascript:alert(document.layerjaune.above.top)">
et où commence-t-il?</a><br>
</body></html>

Explication:

Dans l'exemple sont définis deux layer nommés layerjaune et layerlilas. En outre, deux liens sont notés. Cliquer sur le premier d'entre eux annonce le nom du layer placé sur le layer jaune (document.layerjaune.above.name), l'autre lien annonce sa position en partant du haut (document.layerjaune.above.top). C'est le layer lilas qui est posé sur le layer jaune, étant donné que le layer lilas est défini après le layer jaune dans le fichier.

background

Sauvegarde l'image d'arrière plan (papier peint) d'un layer. L'exemple suivant montre comment vous pouvez, de façon dynamique, changer une telle image d'arrière plan.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
imagenouvelle = new Image();
imagenouvelle.src = "back02.gif";
function arriereplan()
{
 document.TestLayer.background.src="back02.gif";
}
</script>
</head><body>
<layer top=150 name="TestLayer" left=100 height=200 bgcolor=#FFE0FF>
contenu du layer
</layer>
<a href="javascript:arriereplan()">autre arrière plan</a>
</body></html>

Explication:

Dans l'exemple, un layer 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 arriereplan(), qui modifie l'image d'arrière plan de façon dynamique, est appelée. Derrière l'adressage du layer, il vous faut noter background.src et affecter à cette expression le graphique enregistré auparavant.

bgColor

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

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function arriereplan()
{
 if(document.TestLayer.bgColor=="000000")
 { document.TestLayer.bgColor="FFFFF00"; return; }
 else
  { document.TestLayer.bgColor="000000"; return; }
}
</script>
</head><body>
<layer top=150 name="TestLayer" left=100 height=200 bgcolor="#000000">
contenu du layer
</layer>
<a href="javascript:arriereplan()">autre arrière plan</a>
</body></html>

Explication:

Dans l'exemple, un layer a été défini. En cliquant sur le lien, la fonction arriereplan(), 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 layer et lui en affecte une autre.
Remarque: cet exemple n'a pu être vérifié lors d'un test étant donné que Netscape (la version 4.01 a était employée) 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).

below

Sauvegarde quel autre layer se trouve sous un layer. La propriété below retourne l'objet layers du layer placé au dessous. Vous devez donc encore ajouter une propriété comme name pour en apprendre plus sur le layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="layerjaune" top=100 left=50 height=200 bgcolor=#FFFFE0>
Contenu du layer jaune
</layer>
<layer top=150 name="layerlilas" left=100 height=200 bgcolor=#FFE0FF>
contenu du layer lilas
</layer>
<a href="javascript:alert(document.layerlilas.below.name)">Quel layer est placé sous le layer lilas?</a><br>
<a href="javascript:alert(document.layerlilas.below.left)">Et où commence-t-il?</a><br>
</body></html>

Explication:

Dans l'exemple sont définis deux layer nommés layerjaune et layerlilas. En outre, deux liens sont notés. Cliquer sur le premier d'entre eux annonce le nom du layer placé sous le layer lilas (document.layerlilas.below.name), l'autre lien annonce sa position en partant de la gauche (document.layerjaune.below.left). C'est le layer jaune qui est posé le layer lilas, étant donné que le layer jaune est défini avant le layer lilas dans le fichier.

clip

Sauvegarde quel extrait d'un layer 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 layer,
clip.left sauvegarde la valeur en pixels à gauche du coin supérieur gauche du passage visible du layer,
clip.bottom sauvegarde la valeur en pixels en bas du coin inférieur droit du passage visible du layer,
clip.right sauvegarde la valeur en pixels à droite du coin inférieur droit du passage visible du layer,
clip.width sauvegarde la largeur du passage visible du layer (mention alternative à une mention d'un coin inférieur droit),
clip.height sauvegarde la hauteur du passage visible du layer (mention alternative à une mention d'un coin inférieur droit).

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function reduit()
  {
   with(document.monLayer)
   {
    if(clip.height > 0 && clip.width > 0)
         { clip.height-=10; clip.width-=10; }
   }
  }
  function augmente()
  {
   with(document.monLayer)
   {
    if(clip.height < 200 && clip.width < 200)
         { clip.height+=10; clip.width+=10; }
   }
  }
</script>
</head><body>
<layer name="monLayer" top=80 left=80 height=200 width=200 bgcolor=#FFFFE0>
contenu du layer
</layer>
<a href="javascript:reduit()">Plus petit</a><br>
<a href="javascript:augmente()">plus grand</a>
</body></html>

Explication:

Dans l'exemple, un layer est défini. Étant donné que dans la définition HTML aucune mention du passage clip du layer n'a été faite, c'est le layer complet qui est affiché. Ses valeurs clip s'obtiennent à partir de la taille du layer. 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 layer.
À l'aide des deux liens de l'exemple, il est possible de réduire et d'agrandir à nouveau le domaine d'affichage visible du layer. 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 (si clip.width et clip.height sont inférieurs à 200).

document

Chaque layer est traité par Netscape comme un petit document distinct. C'est pourquoi existe aussi pour les layer 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 layer, vous devez adresser les éléments par l'objet document propre au layer.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function autrecontenu()
  {
   document.monlayer.document.open();
   document.monlayer.document.write("maintenant le lien a disparu!");
   document.monlayer.document.close();
  }
</script>
</head><body>
<layer name="monlayer" bgcolor=#FFFFE0>
<a href="javascript:autrecontenu()">écraser ce lien</a>
</layer>
</body></html>

Explication:

Dans l'exemple, un layer est défini. Il contient un lien qui, lorsqu'on le clique, appelle la fonction autrecontenu() 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 layer. Ce qui s'obtient par un adressage tel que document.monlayer.document.

left

Sauvegarde la valeur en pixels de la partie située à gauche du coin supérieur gauche d'un layer par rapport au document hiérarchiquement supérieur. Cela peut être: soit le document global, soit un layer à l'intérieur duquel le layer actuel serait défini. Pour une référence absolue voir pageX.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="Superlayer" left=100>
  <layer name="petitlayer" left=200 width=300 bgcolor=#FFFFE0>
  <a href="javascript:alert(document.Superlayer.document.petitlayer.left)">valeur de gauche?</a>
  </layer>
</layer>
</body></html>

Explication:

L'exemple présente, contenu dans un autre layer, un layer commençant à la position 200 en pixels à partir de la gauche, avec un lien. En cliquant sur ce lien la valeur gauche du layer intérieur est sortie. Elle est donc de 200, bien que le layer commence optiquement à la position 300 (ceci parce que le layer parent commence déjà à 100 et que les 200 du layer intérieur y sont ajoutés).

length

Sauvegarde le nombre de layer d'un fichier.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer></layer>
<layer></layer>
<layer></layer>
<layer></layer>
<script language="JavaScript">
 document.write("Sur cette page il y a  " + document.layers.length + " layers");
</script>
</body></html>

Explication:

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

name

Sauvegarde le nom d'un layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="petitlayer" bgcolor=#FFFFE0>
<a href="javascript:alert(document.petitlayer.name)">Quel est mon nom?</a>
</layer>
</body></html>

Explication:

L'exemple contient un layer avec un lien. En cliquant sur le lien, le nom du layer est sorti dans une boite de dialogue. C'est le nom qui est mentionné en HTML avec l'attribut name=.

pageX

Sauvegarde la valeur en pixels de la toute la partie située à gauche du coin supérieur gauche d'un layer par rapport au document global (même si le layer actuel est défini à l'intérieur d'un autre layer).

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function gauche()
  {
   document.petitlayer.pageX = 0;
  }
</script>
</head><body>
<layer name="petitlayer" left=300 width=300 bgcolor=#FFFFE0>
<a href="javascript:gauche()">vers la gauche avec ce layer</a>
</layer>
</body></html>

Explication:

L'exemple contient un layer commençant à la position 300 en pixels à partir de la gauche. Le layer 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 layer en 0, de telle sorte que le layer commence ensuite tout à fait à gauche.

pageY

Sauvegarde la valeur en pixels pour toute la partie située en haut du coin supérieur gauche d'un layer par rapport au document global, même si le layer actuel est défini à l'intérieur d'un autre layer.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function enhaut()
  {
   document.petitlayer.pageY = 0;
  }
</script>
</head><body>
<layer name="petitlayer" top=300 width=300 bgcolor=#FFFFE0>
<a href="javascript:enhaut()">vers le haut avec ce layer</a>
</layer>
</body></html>

Explication:

L'exemple contient un layer, commençant à la position 300 pixels à partir du haut. Le layer contient un lien. En cliquant sur ce lien, la fonction enhaut(), notée dans un passage JavaScript de l'entête de fichier, est appelée. Cette fonction modifie la valeur pour la hauteur du layer en 0, de telle sorte que le layer commence ensuite tout à fait en haut.

parentLayer

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

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
</script>
</head><body>
<layer name="Superlayer">
  <layer name="petitlayer" bgcolor=#FFFFE0>
  <a href="javascript:alert(document.Superlayer.document.petitlayer.parentLayer.name)">nom du parent?</a>
  </layer>
</layer>
</body></html>

Explication:

L'exemple contient un layer contenu dans un autre layer. En cliquant sur le lien défini dans le layer intérieur, le nom de l'objet parent est sorti. Étant donné que l'objet parent est dans ce cas le layer plus élevé dans la hiérarchie, c'est le nom de ce dernier qui est sorti - à savoir Superlayer.

siblingAbove

Sauvegarde le layer qui, en raison de la position de la couche fixée en HTML avec z-index=, est posé sur le layer adressé. Il s'agit là d'un objet layers pour lequel toutes les propriétés et méthodes disponibles sont valables.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="L1" left=100 top=100 z-index=3 bgcolor=#FFFFE0>contenu du layer  L1</layer>
<layer name="L2" left=120 top=120 z-index=1 bgcolor=#FFFFD0>contenu du layer L2</layer>
<layer name="L3" left=140 top=140 z-index=4 bgcolor=#FFFFC0>contenu du layer L3</layer>
<layer name="L4" left=140 top=140 z-index=2 bgcolor=#FFFFB0>contenu du layer L4</layer>
<layer name="L5" left=100 top=180>
<a href="javascript:alert(document.L1.siblingAbove.name)">siblingAbove L1</a><br>
<a href="javascript:alert(document.L2.siblingAbove.name)">siblingAbove L2</a><br>
<a href="javascript:alert(document.L3.siblingAbove.name)">siblingAbove L3</a><br>
<a href="javascript:alert(document.L4.siblingAbove.name)">siblingAbove L4</a><br>
</layer>
</body></html>

Explication:

L'exemple définit cinq layer en tout. Le layer défini en dernier contient quatre liens. Chaque lien donne, pour chacun des quatre premiers layer, le nom du layer qui en raison de l'ordre z-index est posé dessus. Si on clique par exemple sur le premier lien sera sorti, pour le layer du nom de L1, le nom du layer posé sur lui. C'est dans ce cas le layer avec le nom L3, étant donné que le layer L1 a une valeur z-index de 3 et que le layer L3 a la valeur immédiatement supérieure, à savoir 4.

siblingBelow

Sauvegarde le layer qui, en raison de la position de la couche fixée en HTML avec z-index=, est posé sous le layer adressé. Il s'agit là d'un objet layers pour lequel toutes les propriétés et méthodes disponibles sont valables.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="L1" left=100 top=180>
<a href="javascript:alert(document.L2.siblingBelow.name)">siblingBelow L2</a><br>
<a href="javascript:alert(document.L3.siblingBelow.name)">siblingBelow L3</a><br>
<a href="javascript:alert(document.L4.siblingBelow.name)">siblingBelow L4</a><br>
<a href="javascript:alert(document.L5.siblingBelow.name)">siblingBelow L5</a><br>
</layer>
<layer name="L2" left=100 top=100 z-index=3 bgcolor=#FFFFE0>contenu du layer L2</layer>
<layer name="L3" left=120 top=120 z-index=1 bgcolor=#FFFFD0>contenu du layer L3</layer>
<layer name="L4" left=140 top=140 z-index=4 bgcolor=#FFFFC0>contenu du layer L4</layer>
<layer name="L5" left=140 top=140 z-index=2 bgcolor=#FFFFB0>contenu du layer L5</layer>
</body></html>

Explication:

L'exemple définit cinq layer en tout. Le layer défini en premier contient quatre liens. Chaque lien donne, pour chacun des quatre derniers layer, le nom du layer qui en raison du classement z-index se trouve sous le layer adressé. Si par exemple on clique sur le premier lien, sera donné pour le layer nommé L2 le nom de celui situé dessous. C'est en l'occurrence le layer du nom de L5, étant donné que le layer L2 a une valeur z-index de 3 et que le layer L5 a la valeur z-index immédiatement inférieure, à savoir 2.

src

Sauvegarde le fichier externe incorporé dans un layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="externe" left=50 top=30 width=600 height=200 src="news.htm">
</layer>
<layer left=50 top=250>
<script language="JavaScript">
document.write("<hr><b>le fichier incorporé est: </b>" + window.document.externe.src);
</script>
</layer>
</body></html>

Explication:

L'exemple contient deux layer positionnés. Le contenu du premier layer est un fichier externe nommé news.htm. Dans le deuxième layer, l'adresse exacte du fichier externe est écrite à l'aide de document.write(). Pensez que dans ce cas, il faut utiliser window.document.externe.src pour l'adressage de l'autre layer, étant donné que document.externe.src ne se référerait qu'au layer actuel, et que celui-ci ne contient aucun élément du nom de externe.

top

Sauvegarde la valeur en pixels de la partie située en haut du coin supérieur gauche d'un layer par rapport au document hiérarchiquement supérieur. Cela peut être: soit le document global, soit un layer à l'intérieur duquel le layer actuel serait défini. Pour une référence absolue voir pageY.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="Superlayer" top=100>
  <layer name="petitlayer" top=200 width=300 bgcolor=#FFFFE0>
  <a href="javascript:alert(document.Superlayer.document.petitlayer.top)">valeur du haut?</a>
  </layer>
</layer>
</body></html>

Explication:

L'exemple présente, contenu dans un autre layer, un layer commençant à la position 200 en pixels à partir du haut, avec un lien. En cliquant sur celui-ci, la valeur pour la hauteur du layer intérieur est sortie. Elle est donc de 200, bien que le layer commence optiquement à la position 300 (ceci parce que le layer parent commence déjà lui-même à 100 et que les 200 du layer intérieur y sont ajoutés).

visibility

Sauvegarde si un layer est visible ou non.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function allumeeteint(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="layerjaune" left=50 top=30 width=200 height=200
 visibility=show bgcolor=#FFFFE0>
<a href="javascript:allumeeteint(1)">autre layer allumé/éteint</a>
</layer>
<layer name="layerlilas" left=250 top=30 width=200 height=200
 visibility=show bgcolor=#FFE0FF>
<a href="javascript:allumeeteint(0)">autre layer allumé/éteint</a>

</body></html>

Explication:

Dans l'exemple sont définis deux layer positionnés. Chacun des deux layer contient un lien. Lorsqu'on le clique, c'est respectivement l'autre layer qui est affiché ou qui disparaît. Pour ce faire est appelée à chaque fois la fonction allumeeteint(), notée dans l'entête du fichier. Comme paramètre est transmis à chaque fois le numéro d'index de l'autre layer. La propriété visibility peut avoir trois valeurs: hide (cacher), show (montrer) et inherit (hérité du layer parent ).

zIndex

Sauvegarde la position de la couche d'un layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="unlayer" top=100 left=100 bgcolor=#FFFFE0 z-index="527">contenu du layer</layer>
<a href="javascript:alert(window.document.unlayer.zIndex)">z-index?</a>
</body></html>

Explication:

Dans l'exemple est défini un layer qui reçoit par l'attribut HTML une valeur z-index de 527. Dans le layer est noté un lien. En cliquant sur ce lien, la valeur z-Index du layer est sortie dans une boite de dialogue.

captureEvents()

Surveille les évènements utilisateur dans un layer. Fonctionne exactement comme captureEvents() 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.Layername.captureEvents() vous ne pouvez surveiller que des évènements à l'intérieur du domaine du layer, 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.Layername.handleEvent() ne peuvent être transmis que des évènements surveillés par window.document.Layername.captureEvents().

load()

Charge un fichier externe dans un layer. Attend deux paramètres:
1. source = un fichier (HTML) qui doit être chargé.
2. largeur = largeur d'affichage du layer.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function charge()
  {
   document.unlayer.load("news.htm",600);
  }
</script>
</head><body>
<a href="javascript:charge()">charger News</a>
<layer name="unlayer" top=50 left=20>
</layer>
</body></html>

Explication:

L'exemple contient un layer 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 layer jusqu'alors vide. Le fichier mentionné news.htm est alors chargé dans le layer, en se voyant affecter une largeur d'affichage de 600 pixels.

moveAbove()

Pose un layer sur un autre layer. Attend comme paramètre le layer qui doit être couvert. La position de la couche du layer se modifie alors en fonction de celle du layer qui doit être recouvert. Cette méthode n'a rien avoir avec le mouvement de layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="layerjaune" top=150 left=100 width=200 height=200 bgColor=#FFFFE0>
layer jaune<br>
<a href="javascript:window.document.layerjaune.moveAbove(window.document.layerlilas)">
vers l'avant</a>
</layer>
<layer name="layerlilas" top=50 left=250 width=200 height=200 bgColor=#FFE0FF>
layer lilas<br>
<a href="javascript:window.document.layerlilas.moveAbove(window.document.layerjaune)">
vers l'avant</a>
</layer>
</body></html>

Explication:

Dans l'exemple sont définis deux layer positionnés qui se recouvrent en partie. Tous les deux contiennent chacun un lien, pour que le layer où il se trouve chevauche l'autre.

moveBelow()

Pose un layer sous un autre layer. Attend comme paramètre le layer qui doit couvrir le layer actuel. La position de la couche du layer se modifie alors en fonction de celle du layer qui doit recouvrir le layer actuel. Cette méthode n'a rien avoir avec le mouvement de layer.

Exemple:

<html><head><title>Test</title>
</head><body>
<layer name="layerjaune" top=150 left=100 width=200 height=200 bgColor=#FFFFE0>
layer jaune<br>
<a href="javascript:window.document.layerjaune.moveBelow(window.document.layerlilas)">
vers l'arrière</a>
</layer>
<layer name="layerlilas" top=50 left=250 width=200 height=200 bgColor=#FFE0FF>
layer lilas<br>
<a href="javascript:window.document.layerlilas.moveBelow(window.document.layerjaune)">
vers l'arrière</a>
</layer>
</body></html>

Explication:

Dans l'exemple sont définis deux layer positionnés qui se recouvrent en partie. Tous les deux contiennent chacun un lien, pour que le layer où il se trouve chevauche l'autre.

moveBy()

Déplace un layer 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 layer. 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 layer. Les valeurs négatives déplacent vers le haut, les positives vers le bas.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function saut()
  {
   x = eval(document.Sauteur.document.entree.hr.value);
   y = eval(document.Sauteur.document.entree.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="entree">
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="saut()">
</form>
</body></html>

Explication:

Dans l'exemple est défini un layer 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 layer. En cliquant sur le bouton qui fait lui aussi partie du formulaire, la fonction saut() 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 eval() est appelée pour transformer les entrées de formulaire en nombre. Enfin, la méthode moveBy() applique les valeurs trouvées sur le layer.

moveTo()

Déplace un layer à 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:

<html><head><title>Test</title>
<script language="JavaScript">
  function sauter()
  {
   x = eval(document.sauteur.document.entree.hr.value);
   y = eval(document.sauteur.document.entree.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="entree">
nouveau en haut a gauche: <input size=5 name="hr"> (de la gauche)<br>
nouveau en haut a gauche: <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 layer 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 eval() est appelée pour transformer les entrées de formulaire en nombres. Enfin, la méthode moveTo() applique les valeurs trouvées sur le layer.

Attention:

Si le layer sur lequel vous appliquez la méthode moveTo()se trouve dans un autre layer, Les mentions sont alors relatives au layer extérieur. Une mention telle que moveTo(0,0) placerait donc le layer dans le coin supérieur gauche du layer 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 layer se trouve dans un autre layer.

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.Layername.releaseEvent() ne peuvent être terminées que des surveillances d'évènements commencées avec document.Layername.captureEvents().

resizeBy()

Modifie la taille d'un layer 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 layer 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 layer vers le bas. Les valeurs négatives réduisent, les positives agrandissent.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function reduit()
{
 document.monlayer.resizeBy(-20,-10);
}
function augmente()
{
 document.monlayer.resizeBy(20,10);
}
</script>
</head><body>
<layer name="monlayer" 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 layer. À l'aide de deux liens, il est possible de réduire ou d'agrandir à nouveau le domaine d'affichage du layer. 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 layer 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 layer. Attend les paramètres suivants:
1. valeur x = nouvelle largeur du layer.
2. valeur y = nouvelle hauteur du layer.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
  function modifie()
  {
   x = eval(document.L.document.entree.hr.value);
   y = eval(document.L.document.entree.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="entree">
nouvelle <input size=5 name="hr"> largeur<br>
nouvelle <input size=5 name="vr"> hauteur<br>
<input type=button value="modifier" onClick="modifie()">
</form>
</body></html>

Explication:

Dans l'exemple est défini un layer 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 layer. En cliquant sur le bouton qui fait lui aussi partie du formulaire, la fonctionmodifie() 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 eval() est appliquée pour transformer les entrées de formulaire en nombre. Enfin la méthode resizeTo() applique les valeurs trouvées au layer.

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 Event-Handler 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.Layername.routeEvent() ne s'applique pas au niveau de la fenêtre mais au niveau du layer.


après:	links
avant:	images

SELFHTML/Quickbar JavaScript Référence objet