Webmaster
DHTML : Pages with customised scrollbars
[ Contents ]
Dr Benton
Setting the Décor
Our page will need three layers. The first, called contenu, will display the short text example and the image that can be scrolled. The second one, called barre, will simply contain the image of the scrollbar, and the third, called curseur, will contain... the very important cursor:
153: <style type="text/css">
154: #barre {position:absolute;left:-2000;top:50;}
155: #curseur {position:absolute;left:-2000;top:50;}
156:
157: .texte
158: {
159: font-size: 8pt;
160: color: white;
161: font-family: verdana,arial
162: }
163:
164: </STYLE>
167: <BODY bgcolor="#000000" onLoad="init()">
168:
169: <DIV id="barre"><IMG NAME="barre_image" SRC="barre.gif"></DIV>
170: <DIV id="curseur"><IMG NAME="curseur_image" SRC="curseur.gif"></DIV>
171:
172: <div class="texte" id="contenu" style="position:absolute; left:300px; top:200px; width:800px; height:100px; background-color: #0088CA; layer-background-color: #0088CA; border: 1px none #000000; padding: 3px;clip:'rect(0px 293px 100px 0px)'">
173: <IMG SRC="mini_mm.gif" ALT="Mini MM" ALIGN=LEFT>
174: Internet is, first and foremost, a network. In computer science,<BR>
175: a network is a mesh of interconnected computers.<BR>
176: These computers and their users (you<BR>
177: for instance!) can exchange data. The<BR>
178: transmitted data can be text, sound,<BR>
179: videos, etc...
180: </div>
181:
182: </BODY>
183: </HTML>
We should stress two important facts:
- On line 167, we call up a JavaScript function called init() which will be described later on. It is not only used to initialise the objects and mouse events involved in our effect but
also to start it.
- On line 172, the instruction clip:'rect(0px 293px 100px 0px)' initialises the clipping area on the contenu layer.