Dernière mise à jour :2008-10-16

informatique

Conception d'un d'un module de transition de texte en DHTML

Les courtes animations peuvent ajouter du style et de l'ambiance lors du design d'un site web. Il est semsiblement facile de produire des animation de style GIF animé. Par contre, lorsqu'il vient le temps de développer une animation comprennant du texte, il peut être utile de recourir à d'autres outils de développement. En effet, si le texte paraissant dans l'animation doit pouvoir être mis à jour de façon régulière, les animations de type GIF ou FLASH peuvent apporter des difficultés de mises à jour. L'atelier de cette semaine propose donc la conception d'un module d'affichage de texte avec transition, c'est à dire que plusieurs blocs de texte paraissent à l'intérieur d'une même zone pendant une courte durée avec une transition lors du passage d'un texte à un autre.

Pour visualiser le résultat, cliquez ici

Voici le listing du module. La transition a été testé et fonctionne dans les navigateurs Internet Explorer 5.x et Netscape 6.x. Le changement de texte se fait correctement dans Netscape 4.x bien que la transition (fading) ne se produise pas. Finalement, bien que le code n'ait pas été testé sous Internet Explorer 4.x, l'exécution devrait se faire sans problème à l'intérieur d'un tel navigateur.

Listing 1.0 Module de transition
1. <HTML>
2. <HEAD>
3. </HEAD>
4. <BODY onload="initTransition();">
5. 
6. <script language="JavaScript1.2">
7. 
8. /*
9. Textes avec transitions
10. */
11. 
12. //Informations relatives aux différents navigateurs
13. var DOM2=document.getElementById;
14. var ie4=document.all&&!document.getElementById;
15. var ns4=document.layers;
16. 
17. var intDelaiTransition = 0;
18. var intCpt = 0;
19. 
20. //Configurer le temps entre les transitions (en millisecondes)
21. var intDelai=3000;
22. 
23. //Configurer le temps d'une transition
24. if (DOM2)
25.  intDelaiTransition=5000;
26. 
27. //Déterminer le contenu textuel
28. var vectContenu=new Array();
29. var strDebutTexte='<FONT FACE="arial" SIZE="2"><P ALIGN="left"><STRONG>Module de transition...</STRONG></P></FONT><font face="Arial" size=1>';
30. vectContenu[0]="A525G est un site d'information générale sur l'informatique.";
31. vectContenu[1]="Bienvenu sur le site de A525G!.
Ce site propose une série d'article sur divers domaine de l'informatique.";
32. vectContenu[2]="Une rubrique fond d'écran a récemment été intégré au site. ";
33. var strFinTexte='</font>';
34. 
35. //fonction permettant de changer le contenu
36. function initTransition()
37. {
38.  if (intCpt>=vectContenu.length)
39.   intCpt=0;
40.  if (DOM2)
41.  {
42.   document.getElementById("idModuleTransitionIe").style.color="rgb(255,255,255)"
43.   document.getElementById("idModuleTransitionIe").innerHTML=strDebutTexte+vectContenu[intCpt]+strFinTexte
44.   transitionCouleurs();
45.  }
46.  else if (ie4)
47.   document.all.idModuleTransitionIe.innerHTML=strDebutTexte+vectContenu[intCpt]+strFinTexte
48.  else if (ns4)
49.  {
50.   document.idModuleTransitionNs.document.idModuleTransitionNs_sub.document.write(strDebutTexte+vectContenu[intCpt]+strFinTexte)
51.   document.idModuleTransitionNs.document.idModuleTransitionNs_sub.document.close()
52.  }
53.  intCpt++;
54.  setTimeout("initTransition()",intDelai+intDelaiTransition)
55. }
56. 
57. // Valeur de couleur initiale
58. intCouleur=255;
59. intFrame=30;
60. 
61. // Fonction de transition des couleurs
62. function transitionCouleurs()
63. {
64.  if(intFrame > 0)
65.  {
66.   // Assombrir la couleur
67.   intCouleur-=5;
68.   // Configurer la valeur de la couleur
69.   document.getElementById("idModuleTransitionIe").style.color="rgb("+intCouleur+","+intCouleur+","+intCouleur+")";
70.   intFrame--;
71.   // Configurer le temps entre chaque changement de couleur
72.   setTimeout("transitionCouleurs()",100);
73.  }
74.  else
75.  {
76.   document.getElementById("idModuleTransitionIe").style.color="rgb(0,0,0)";
77.   intFrame=30;
78.   intCouleur=255;
79.  }
80. }
81. 
82. // Création (sous ie4+ et autres browser supportant le DOM2) de la zone rectangulaire dans laquel paraitront les textes
83. if (ie4||DOM2)
84.  document.write('<div id="idModuleTransitionIe" style="width:380;height:120;padding:2px"></div>');
85. 
86. </script>
87. 
88. <!-- Création (sous ns4+) de la zone rectangulaire dans laquel paraitront les textes -->
89. <ilayer id="idModuleTransitionNs" width=380 height=120>
90. <layer id="idModuleTransitionNs_sub" width=380 height=120 left=0 top=0></layer>
91. </ilayer>
92. 
93. </BODY>
94. </HTML>

Description du listing 1.0

Suite au téléchargement de la page, des variables destinées à contenir de l'information concernant le navigateur du client (visiteur de la page), sont initialisé (voir lignes 13, 14, 15). Sur les lignes, 21, 24 et 25 sont initialisées deux autres variables. Celles-ci renfermeront des informations sur le délai d'attente entre chaque transition. La première variable sera utilisée par tous les navigateurs. La seconde par contre, sera additionné à la première dans les navigateurs acceptant le DOM2 (document object model) dans le but d'équilibrer les transition dans tous les navigateurs.

Les lignes 30, 31 et 32 initialise un vecteur qui contiendra les textes qui s'afficheront dans la zone prévue à cet effet. Aux lignes 29 et 33 est fait la création de deux variable permettant d'ajouter du formattage et du texte avant et après chacun des messages.

Finalement, la zone qui servira d'affichage est créé en ligne 83 pour Internet Explorer 4.x et plus et les autres navigateur respectant le DOM2 comme par exemple Netscape 6.x et en lignes 89, 90 et 91 pour le navigateur Netscape 4.x.

La dernière instruction exécuté par le navigateur après le téléchargement de la page est la fonction "initTransition" inclue dans l'événement onload de la page, indiqué à la ligne 4 dans la balise BODY. Cette fonction, vous l'aurez deviné, est le coeur de tout le programme.

En premier lieu, elle initialise un compteur (ligne 39) qui permettra de naviguer parmi les textes contenus dans le vecteur. En second lieu, une instruction conditionnelle oriente le navigateur vers l'instruction lui étant réservé. Dans le cas des navigateurs respectant le DOM2, la couleur du texte est initialisée à 255 ou blanc. Ensuite, la fonction "transitionCouleurs" est appelée (ligne 44 dans le cas de DOM2). La dernière instruction de la fonction "initTransition" est un appel de la fonction setTimeout. Cette fonction permet d'exécuté une instruction après un laps de temps. Dans le cas du présent programme, c'est un procédé récursif qui est exécuté car c'est la fonction "initTransition" qui se rapelle elle même de façon continu.

L'effet visuel de transition prend forme lorsque la fonction "transitionCouleurs". Le code de celle-ci est inscrit entre les lignes 61 et 80. Cette fonction est elle aussi exécuté de façon récursive tant que le nombre de changement de couleurs indiqués dans la variable intFrame, n'atteind pas zéro (ligne 64). La variable intCouleur qui contient le code de couleur qui est appliqué sur le texte, est décrémentée en ligne 67.

Remarque : Vous aurez sûrement remarqué le grand nombre de varible de type entière utilisé dans le code. Vous aurez probablement remarqué que si vous changez celles-ci, les effets de transition seront interprétés différemment. Je vous laisse donc vous amuser à tester celà.

Après avoir complété cette atelier, vous connaitrer la fonction JavaScript "setTimeout" qui permet de dire au navigateur de faire une pause avant l'exécution d'une instruction. Vous aurez appris comment intégrer des instructions conditionnel pour le bon fonctionnement du code dans plusieurs navigateur et finalement, vous disposerez d'un module d'animation textuel facilement implantable dans votre site web.

Auteur : Sylvain Bilodeau

Date de mise en ligne : 2002-01-29

Aucun commentaire pour l'instant.