 |
Publicité 
|
Nous allons décrire les différentes étapes à suivre pour changer les propriétés d'une partie de page HTML afin de créer une animation en javascript.
Dans un premier temps, il faut déclarer le texte ou/et les images à animer dans une balise DIV comme ceci :
<DIV ID="MonDiv" STYLE="position:absolute;">
contenu à changer
</DIV>
Vous pouvez remarquer qu'il est nécessaire de fixer au moins deux attributs du DIV.
L'attribut ID sert à repérer le DIV que l'on veux modifier.
L'attribut STYLE est utilisé ici pour indiquer que le DIV est positionné en coordonnées absolues (en positionnement relatif, certain effet ne sont pas opérationnel). L'inconvénient d'un positionnement absolu, est de devoir préciser les coordonnées pour positionner le contenu du DIV au bon endroit dans la page. Il y a deux moyen pour cela, soit en déclarant dans la propriété STYLE du DIV les coordonnées (ex : left :50 ;top :100), soit en utilisant la fonction SetToAnchor présente dans la librairie libV1.js (cf. article suivant : " une librairie javascript ").
Ensuite, il faut déclarer les variables et fonctions javascript utilisées dans la partie HEAD de votre document HTML, comme suit :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-
Déclaration des variables
Déclaration des fonctions javascript
//-->
</SCRIPT>
</HEAD>
<BODY>
Contenu de la page HTML
</BODY>
</HTML>
Enfin, vous devez déclarer les appels aux fonctions dans les attributs de type événement des balises concernées. Voici quelques exemples :
<BODY onload="init()">
appel la fonction init() au chargement de la page HTML
<A HREF="toto.htm" onclick="tata()">titi</A>
appel de la fonction tata() lorsque l'on clique sur le lien titi
Attention, il est à noter que suivant le navigateur utilisé, les balises acceptent plus ou moins d'attributs de type événement. Par exemple, l'événement onclick peut être utilisé pour une image (balise <IMG>) sous internet explorer et pas sous netscape. De ce fait, au lieu d'utiliser le code suivant :
<IMG SRC="MonImage.gif" onclick="MaFonction()">
Qui ne fonctionne que sur internet explorer, on utilisera le code suivant :
<A HREF="#" onclick="MaFonction()"><IMG SRC="MonImage.gif"></A>
Pour que cela fonction sous Netscape.
L'article suivant, vous propose une bibliothèque de fonctions javascript très utiles pour animer vos pages HTML.
|
