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é diffère quelque peu entre les deux browsers.
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.attributVoici 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 |
Ajouter aux Favoris Ajouter aux votre page
Acceuil | Forum| Contactez-Nous | Annace |Chat| Music |Radios|Sockets |Protocoles|Windows NT
Langage C |Langage C++ | Assembleur | Java | Perl |Pascal/delphi | Visual basic|MERISE | SQL| JDBC| ODBC
ASP|CGI |HTML |DHTML |XML|Javascript |JSP |PHP|Servlets |VBScript |WAP |UNIX |Linux |MacOS|Windows 9x
Assemblage-PC |Modèle relationnel|Histoire-PC|Fonctionnement-PC|photo pour rire|MS-Dos|Architecture-PC
Flash MX |Word-2003|Power Point|Excel|Langage C|Langage Java|Visual Basic|La base XP | programming
Physique Arabic partie I|Programation en arabe|Physique Français|Internet| Sécurité Informatique
HTML |Agebre en Français|Math Français partie I|Physique Arabic partie II| الطرق العددية
Electricité| Math Français partie II|Math en Arabic|Agebre en Arabic| الأعداد العقدية
Tous les cours informatiques en vidéos |Droit Informatique |logiciels
Tous les cours physiques en vidéos |Microsoft office
Cours math en vidéos | Msn en ligne
TV Live
Autoformations les cours informatiques en vidéos gratuitement
:: Copyright © 2008 http://www.autoformations.co.cc All rights reserved ::