Les calques utilisent trois technologies web : HTML/XHTML, CSS et JavaScript. Les calques constituent une partie importante de HTML Dynamique (DHTML). Ils permettent de regrouper des parties d’un document HTML afin de les manipuler comme un tout. On peut ainsi déplacer dynamiquement des parties d’un document. On peut aussi cacher et faire apparaître des parties d’un document à volonté.

Un calque peut contenir tout ce qui peut être contenu dans le corps d’un document. On peut donc y placer du texte, des images, des tableaux, des liens, des formulaires, … et même d’autres calques. La solution présentée ici fonctionne sur tous les navigateurs connus.

On définit un calque en utilisant les balises <DIV> et </DIV>. Voici un exemple représentatif de la façon de définir des calques :

<div id="unLayer" style="position:absolute; left:124px; top:68px; width:281px; 
height:108px; z-index:1; overflow: visible; visibility: inherit; background- 
color: #00FFCC; layer-background-color: #00FFCC; background-image: 
url(test1a4.gif); layer-background-image: url(test1a4.gif) ; clip: rect(10 50 50 
10)"> 
contenu du calque ici. 
</div> 

1. id est l’identificateur du calque. Dans les scripts javascript, on fait référence et on manipule les calques en utilisant leurs identificateurs.
2. style : définit les propriétés du calque (position, dimensions, visibilité,…).

• position : indique la référence par rapport à laquelle sera mesurée la position du calque. Elle a deux valeurs possibles :
  • absolute : la position se mesure par rapport au sommet en haut à gauche de la page contenant le document.
  • relative : la position se mesure par rapport à l’élément qui contient le calque. Par exemple, si le calque est dans une cellule d’un tableau (entre <td> et </td>), la position se mesure par rapport au sommet en haut à gauche de la cellule.
• left et top : précise la position du calque.
• width et height : précise les dimensions du calque.
• z-index : indique l’ordre de profondeur du calque. Plus cette valeur est élevée, plus le calque est au premier plan. Un calque avec un z-index égale à 3 va cacher un calque avec un z-index égale à 2, si bien sur les 2 calques couvrent une zone commune.
• visibility : indique si le calque est visible ou non. Les valeurs possibles sont :
  • inherit : la visibilité du calque est la même que celle de son contenant.
  • visible : le calque est visible et apparaît à l’écran s’il n’est pas caché par un autre calque.
  • hidden : le calque est caché et n’apparaît pas à l’écran.
• overflow : indique ce qui se passe si le contenu du calque dépasse les dimensions du calque telles qu’elles sont définies par les propriétés width et height. Les valeurs possibles sont :
  • visible : la taille du calque augmente pour montrer tout le contenu.
  • hidden : la taille du calque est maintenue fixe et le contenu au delà de la taille du calque n’apparaît pas.
  • scroll : des barres de défilement sont toujours ajoutées.
  • auto : des barres de défilement sont ajoutées si nécessaire.
• clip : définit un clipping sur le calque. Seul ce qui est à l’intérieur de la zone de clipping est visible.
• On peut aussi définir une couleur ou une image en arrière plan.