Directory

Top 50

DHTML : Images scrolling under your titles
[ Contents ]
Dr Benton

The Basics of our Page

Our page body is streamlined to the extreme:

  5: <style type="text/css">
  6:
  7: .textstyle {
  8: position:absolute;
  9: left:-2000px;
10: }
11:
12: .bgdivstyle {
13: position:absolute;
14: left:-2000px;
15: }
16: </STYLE>

[...]

167: <BODY bgcolor=FFFFFF style="width:100%;overflow-x:hidden;overflow-y:scroll" onLoad="init()">
168:
169: <DIV id="bgdiv" class="bgdivstyle"></DIV>
170: <DIV id="text" class="textstyle"></DIV>
172: </BODY>
What we are doing here is to implement the two layers that will each contain an image:

  • The first, identified by bgdiv, will contain the background image for the animation (line 169).

  • The second, identified by text, will contain the image for the title (line 170).

These two layers are defined by means of a specific style (lines 5-16) which allows them to be positioned out of sight of the page (left=-2000px). The init() function of the script will then be called up from the <body> tag in order to position them correctly.



Composing the Animation
  1   2   3   4   5   6 
Preloading the Images