Webmaster
DHTML : Text with wave effects
[ Contents ]
Mickaël le Moal
Initialisation
Once these parameters are set, the actual initialisation process can begin. The goal is to detect the browser used by the visitor and to position the layers accordingly. We will use JavaScript and HTML for this step.
18: function init ()
19: {
20: l = new Array();
21: if (Navigateur()=='Netscape')
22: for (i=0;i<nb_obj;i++) {
23: eval('l['+i+'] = document.layers["lettre'+(i+1)+'"];');
24: l[i].left=i*sep+x;
25: }
26: else
27: for (i=0;i<nb_obj;i++) {
28: eval('l['+i+'] = document.all.lettre'+(i+1)+'.style;');
29: l[i].Pixelleft=i*sep+x;
30: }
31: lance()
32: }
[...]
70: <BODY onLoad="init()">
[...]
73: <table width="100%" border="0">
74: <tr>
75: <td width="70"&&gt; </td>
76: <td width="10"><layer name="lettre1"><div id="lettre1" style="position:relative; left:25"><b>M</b></div></layer></td>
[...]
86: <td width="70"> </td>
87: </tr>
88: </table>
To create our effect, each character must be able to move independently of the others. This is why we create a layer for each individual character. The layers are created in the body of the page, between the <body> and </body> tags (lines 76-86).
In our example, we want to display the words Surfin'USA. Since this word is made up of 10 characters, our page will use 10 layers. The creation of the first layer is done on line 76 and the syntax is the same for the nine following layers. Each one needs a different name (lettre1, lettre2, etc.), identifier and content.
The init() function (line 18) initialises an array called l, which provides us with an easy access to the different layers. This array is defined according to the browser that has been identified (on line 21 for Netscape Navigator and on line 26 for Internet Explorer). Thus, if the methods of accessing the various layers change from one version to another, our script will always be able to handle them in the same way, simply by referencing the array.
Once the initialisation of the array is finished, the horizontal coordinates of each layer are set. We then start the lance() function that initiates the beginning of the animation.