The Scrolling Control

This area shows the arrows (on the right-hand side of the screen) that enable the visitor to vertically scroll the page or to jump back to the beginning of it. Just positioning the mouse pointer over one of the control's arrows will activate the scrolling. And the more the pointer is moved away from the centre of the control, the higher the scrolling speed will be. Test yourself.



Figure 1: The control for vertical page scrolling.

Our scroll control will be placed on a layer called scrollerLayer. To support several scrolling speeds, we will combine an image map and the onmouseover event so that we can achieve three different scrolling speeds in each direction, upwards or downwards, depending on the mouse position. Our control image will be divided into seven areas (Up-Slow, Up-Medium, Up-Fast, Down-Slow, Down-Medium, Down-Fast and Top, in the centre of the control to quickly jump back to the start of the document).

Here is the corresponding code:

33: <IMG SRC="scroll.gif" USEMAP="#scroller_map" WIDTH="45" HEIGHT="115" BORDER="0">
34: <MAP NAME="scroller_map">
$$$47$$$35:     <AREA SHAPE=RECT COORDS="0,0,45,20" HREF="JavaScript://" onMouseOver="loop=true;ScrollPage('up',25)"; onMouseOut="loop=false;clearTimeout(timer1)" ALT="Fast speed">
$$$Peut-être un problème de numérotation de ligne ?$$$
36 to 40 // Image map coding continuation

41:     <AREA SHAPE=RECT COORDS="0,100,45,114" HREF="JavaScript://" onMouseOver="loop=true;ScrollPage('dn',25)"; onMouseOut="loop=false;clearTimeout(timer1)" ALT="Fast speed">
42: </MAP>

For each of the areas in our image map, the HREF attribute has been set (no URL) together with the onMouseOver event (fired when the pointer hovers over the area) which is used to loop-execute the ScrollPage function. In this way, ScrollPage('up',25) will scroll the page by 25 pixels upwards, and ScrollPage('dn',5) will scroll it by 5 pixels downwards. We will use the values 1, 5 and 25, respectively, for the slow, medium and fast speed scrolling.