SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape)| SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape) |
 |
Ranger et contrôler les calques |
|
|
 | |
Mention de la position de la couche avec le nom du calqueSi 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.
<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> |
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.
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.
|
Mention de la position de la couche avec des numéros d'indexSi 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.
<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> |
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.
Pour les mentions z-index= les valeurs négatives sont également permises. Cela vous permet d'obtenir lors de l' 
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.
|
|
Cacher et afficher des calquesVous 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 
JavaScript .
<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>
|
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' 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.
|
| |
 |
Passages de feuilles de style en HTML
|
 |
Définir et positionner des calques
|
| SELFHTML/Aides à la navigation HTML/XHML Calques (Netscape) |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
