DHTML - L'animation des éléments

Le principe

L'animation des éléments présents sur une page Web se fait en modifiant leur propriété (position, hauteur, largeur, visibilité, z-index, ...) ou en utilisant leur méthodes (fonctions associées à un élément). Cela ne peut se faire qu'à l'aide d'un code Javascript, permettant de modifier les propriétés des éléments suite à des événements utilisateurs (clic sur la souris, déplacement de la souris, ...), et cela grâce à une structuration des éléments dans la page définie par le DOM (Document Object Model).

Le Document Object Model (DOM)

Le Document Object Model est un principe consistant à représenter le navigateur et le document qui y est affiché comme une hiérarchie d'objets (voir éventuellement la section programmation orientée objet pour comprendre le concept objet), possèdant des propriétés intrinsèques et auxquels ont peut accéder en décrivant la hiérarchie qui mène à chaque objet.

Toutefois, le Document Object Model ayant été implémenté de manière "sauvage" dans les deux navigateurs concurrents (ie Netscape et Internet Explorer), la hiérarchie et les propriétés diffèrent quelque peu entre les deux navigateurs.

Les propriétés modifiables

Selon que l'on utilise Internet Explorer ou Netscape, la façon d'accèder aux propriétés des éléments est différente, ainsi que les propriétés elles-mêmes (il s'agira donc dans un premier temps de déterminer par l'intermédiaire du script le type de navigateur utilisé, puis adapter la notation en fonction...).

• Netscape permet d'accéder aux différents layers en utilisant la syntaxe suivante :

  document.layers['nom'].document.layers['nom2'].attribut
  ou
  document.layers.nom.document.layers.nom2.attribut

• Internet Explorer définit un objet appelé "all" contenant tous les éléments DIV. Ainsi, l'accès aux éléments se fait par la syntaxe suivante :

  document.all.nom.attribut

Voici un petit aperçu des actions réalisables en DHTML et la façon de les effectuer sur les deux navigateurs :

Action	Netscape Navigator	Internet Explorer
Modifier l'image de fond	document.layers.nom.background	document.all.nom.style.backgroundImage
Modifier la couleur du fond	document.layers.nom.bgColor	document.all.nom.style.backgroundColor
Modifier le clipping	document.layers.nom.clip	document.all.nom.style.clip
Modifier le contenu	document.layers.nom.open(); document.layers.nom.writeln();	document.all.nom.innerHTML
Modifier la distance à gauche	document.layers.nom.left	document.all.nom.style.left
Accéder au nom	objet.name	objet.id objet.name
Modifier la visibilité	document.layers.nom.visibility	document.all.nom.style.visibility
Modifier la distance au haut	document.layers.nom.top	document.all.nom.style.top
Modifier le z-index	document.layers.nom.zIndex	document.all.nom.style.zIndex

Discussions pertinentes trouvées dans le forum

22/07 14h00	Exécuter un script dhtml dans une page .php ?	Webmastering	22/07 15h47->Erdnax	17
03/11 00h27	Mon player audio DHTML : qu'en pensez_vous ?	Développement	04/11 16h20->Marden	10
28/04 14h09	DHTML / Javascript	Windows	29/04 16h15->Aki75	10
09/04 17h11	Menu Dhtml -> cadre	Windows	12/04 13h11->ipl	9
15/05 14h10	Acces .dll a partir de VBScript [DHTML]	Développement	16/05 10h49->teebo	6
10/04 12h00	DHTML ou XML	Développement	17/04 14h41->dje-dje	5
23/04 15h21	retrouver adresse Email ( DHTML)	Développement	24/04 12h08->driss	4
19/06 12h28	[DHTML]Probleme de layers	Développement	21/06 10h13->esox_ch	4
23/04 15h20	comment retrouver adresse Email ( DHTML)	Windows	21/01 10h24->charles	3
26/04 11h50	dhtml string->variable	Développement	26/04 13h14->teebo	3
Discussion fermée Problème résolu		Plus de discussions sur « DHTML »