Comme expliqué précédemment la balise DIV permet de définir un bloc constitué de plusieurs éléments. Cette balise accepte de plus différents attributs (tous facultatifs) permettant de préciser où positionner exactement le bloc sur la page.

Exemple:

<div id="moncalque"  style="position:absolute; width:200px; height:115px; 
                     z-index:1; left: 233px; top: 171px; 
                     background-color: #99CC33; 
                     layer-background-color: #99CC33;>bonjour le monde</div>

définit un bloc nommé moncalque (indispensable pour l'animation) dont le coin supérieur gauche sera positionné en (233, 171). La position donnée est une position par rapport au coin supérieur gauche du navigateur (valeur absolute de l'attribut position) ou par rapport au coin supérieur gauche de l'élément parent dans le cas d'imbrication de balises DIV. On peut aussi donner une position relative par rapport à l'objet précédent en utilisant la valeur relative à la place de absolute.

La valeur de z-index définit la position du bloc dans le cas de chevauchements de plusieurs blocs. Tout bloc ayant un z-index > 1, sera au dessus de moncalque.

La couleur de fond est verte, background-color est interprété par IE et layer-background-color par Netscape. Pour JavaScript le nom de cet objet est:

• document.all['moncalque'] sous IE
• document.layers['moncalque'] sous Netscape

Les propriétés top, left, width et height des layers se nomment style.top, style.left, style.width et style.height pour IE.

Pour écrire une procédure déplaçant un objet DIV, il faudra alors tester dans le script le navigateur utilisé grâce à l'instruction: NS = (navigator.appName == 'Netscape');

Exemple: voici une fonction qui déplace de n pixels vers la droite le bloc moncalque

function bouge(calque, n)
{
  var NS = (navigator.appName == 'Netscape');
  
  if (NS) 
    document.layers[calque].left += n;
  else
    document.all[calque].style.left = parseInt(document.all[calque].style.left) + n;
  
}

Remarquez au passage que pour IE il est nécessaire de convertir en un entier la valeur renvoyée par document.all[calque].style...

Cliquez ici pour une démo qui fonctionnera aussi bien sous IE que sous Netscape.