SELFHTML

Ranger et contrôler les calques

Page d'information: vue d'ensemble

vers le bas Mention de la position de la couche avec le nom du calque
vers le bas Mention de la position de la couche avec des numéros d'index
vers le bas Cacher et afficher des calques

 vers le bas 

Netscape 4.0 Mention de la position de la couche avec le nom du calque

Si vous définissez plusieurs calques dans un fichier HTML dont les domaines d'affichage se superposent, les calques sont en principe affichés les uns sur les autres dans l'ordre dans lequel ils sont définis. Pourtant vous pouvez modifier cet ordre et mentionner quel autre calque doit poser immédiatement sur ou sous le calque actuel. De cette façon, vous pouvez contrôler la superposition de calques. La condition préalable est que vous ayez affecté un nom à chaque calque.

Exemple:

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

<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<layer name="premier"
top="0" left="0" width="300" height="200" bgcolor="FFFF99">
<h1>PREMIER</h1>
</layer>
<layer name="second"
top="50" left="100" width="300" height="200" bgcolor="99FF99">
<h1>SECOND</h1>
</layer>
<layer name="troisieme" above="second"
top="100" left="200" width="300" height="200" bgcolor="9999FF">
<h1>TROISIÈME</h1>
</layer>
<layer name="quatrieme" below="premier"
top="150" left="300" width="300" height="200" bgcolor="FF99FF">
<h1>QUATRIÈME</h1>
</layer>

</body>
</html>

Explication:

Avec l'attribut above= dans le repère d'ouverture <layer> ou bien <ilayer> vous pouvez déterminer qu'un calque défini et nommé auparavant soit placé juste sur le calque actuel (above = au dessus). Ce qui veut dire que le calque actuel doit être complètement recouvert par le calque nommé lors du recouvrement.
Avec l'attribut below= dans le repère d'ouverture <layer> ou bien <ilayer> vous pouvez déterminer qu'un calque défini et nommé auparavant soit placé juste au dessous du calque actuel (below = au dessous). Ce qui veut dire que le calque actuel doit recouvrir le calque nommé lors du recouvrement.
Les noms de calque derrière above= et below= doivent figurer entre guillemets.

Attention:

Pour above= et below= vous ne pouvez mentionner que des noms de calque qui ont déjà été définis auparavant dans le fichier. La mention de calques qui ne seront définis qu'après le calque actuel peut entraîner des erreurs d'affichage. Dans la première définition d'un calque dans un fichier HTML ne doivent apparaître pour cette raison aucune des mentions above= ou bien below=.

Une seule mention de above= ou below= est permise dans la définition d'un calque. Car par cette mention, vous fixez toujours quel autre calque doit être affiché directement sur ou sous le calque actuel.

 vers le hautvers le bas 

Netscape 4.0 Mention de la position de la couche avec des numéros d'index

Si vous définissez plusieurs calques dans un fichier HTML dont les domaines d'affichage se superposent, les calques sont en principe affichés les uns sur les autres dans l'ordre dans lequel ils sont définis. Pourtant vous pouvez modifier cet ordre en affectant des numéros pour les différents calques. Les calques avec un numéro plus élevé couvrent les calques avec un numéro plus petit.

Exemple:

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

<html>
<head>
<title>Texte du titre</title>
</head>
<body>

<layer z-index="3"
top="0" left="0" width="300" height="200" bgcolor="FFFF99">
<h1>PREMIER</h1>
</layer>
<layer z-index="1"
top="50" left="100" width="300" height="200" bgcolor="99FF99">
<h1>SECOND</h1>
</layer>
<layer z-index="4"
top="100" left="200" width="300" height="200" bgcolor="9999FF">
<h1>TROISIÈME</h1>
</layer>
<layer z-index="2"
top="150" left="300" width="300" height="200" bgcolor="FF99FF">
<h1>QUATRIÈME</h1>
</layer>

</body>
</html>

Explication:

Avec l'attribut z-index= dans le repère d'introduction <layer> ou bien <ilayer> vous déterminez l'ordre dans lequel les calques se recouvrent (z-index = ordre de priorité). Mentionnez à chaque définition de calque z-index= suivi d'un numéro. Le calque avec le numéro le plus élevé couvre tous les autres. Le calque avec le numéro le plus faible est couvert par tous les autres.

Attention:

Pour les mentions z-index= les valeurs négatives sont également permises. Cela vous permet d'obtenir lors de l' Autre page d'information imbrication de calques, que des calques qui sont définis dans un autre calque soient couverts par les "parents de celui-ci. Pour des chiffres positifs c'est le contraire.

 vers le hautvers le bas 

Netscape 4.0 Cacher et afficher des calques

Vous pouvez fixer lors de la définition de calques s'ils doivent être affichés ou non. C'est important si vous voulez allumer et éteindre l'affichage des calques de façon dynamique à l'aide de Chapitre: vue d'ensemble JavaScript .

Exemple:

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

<html>
<head>
<title>Texte du titre</title>
<script type="text/javascript">
<!--
function hideLayer(nr) {
 document.layers[nr].visibility = "hide";
}

function showLayer(nr) {
 document.layers[nr].visibility = "show";
}
//-->
</script>
</head>
<body>

<layer top="10" left="10" bgcolor="#DDFFDD">
<p><a href="javascript:showLayer(1)"><b>afficher l'autre calque</b></a><br>
(pour cela un simple script JavaScript est mis en œuvre)</p>
</layer>

<layer top="60" left="60" bgcolor="#CCEEFF" visibility="hide">
<p><a href="javascript:hideLayer(1)"><b>cacher ce calque</b></a><br>
(pour cela un simple script JavaScript est mis en œuvre)</p>
</layer>

</body>
</html>

Explication:

Avec l'attribut visibility= dans le repère d'ouverture <layer> ou bien <ilayer> vous pouvez explicitement imposer ou empêcher l'affichage (visibility = visibilité).
Avec visibility="show" vous fixez que l'affichage du calque se fasse dans tous les cas(show = montrer).
Avec visibility="hide" vous fixez que l'affichage du calque ne se fasse pas à savoir que le calque soit caché (hide = cacher).
Avec visibility="inherit" vous fixez que le calque ne soit affiché que si son élément "parent" est lui aussi affiché (inherit = hériter). Cette mention n'est significative que pour les calques intérieurs lors de l'Autre page d'information Imbrication de calques.

L'exemple ci-dessus montre en quoi cacher les calques est intéressant: ce n'est qu'à l'aide de JavaScript que cela peut être mis en lumière.

 vers le haut
page suivante Autre page d'information Passages de feuilles de style en HTML
page précédente Autre page d'information Définir et positionner des calques
 

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