DHTML Lab: Scrollbars for Netscape Navigator Layers

Scrollbars for Navigator 4 LAYERs, Part I
the scrollbar images (GIFs)

The scrollbar itself is several layers that contain the component images. The table below describes all the requisite images and their use:

The Scrollbar Images

Real Size

Expanded

Filename/size

Use

butTu.gif
16x16

The top arrow button in its idle state. This image is always visible, except when the mouse button is pressed over it (mousedown). It is then replaced with the image below (butTd.gif) to represent the depressed button. The mousedown also calls a script routine to begin scrolling up.

butTd.gif
16x16

The top arrow button in its active (depressed) state. This image is initially hidden, and appears only to replace the image above (butTu.gif) when the mousedown occurs. It is hidden again upon mouseup.

barBg.gif
2x2

The elevator bar in its idle state. This two-color, four-pixel image is repeated as a layer background to create the light shade associated with the elevator bar, and is always visible.

barBgBl.gif
2x2

The elevator bar in its active state. This image is also repeated as a layer background, creating the dark shade that appears when a click or mousedown occurs over the elevator bar. It is initially hidden.

tmbTop.gif
16x2

The thumb top. This always-visible image creates the 3D shading in the top two pixels of the thumb.

tmbBg.gif
16x1

The thumb body. This image is also repeated as a layer background to represent the height of the thumb. The layer is resized by script adjusting the number of image repetitions.

tmbBot.gif
16x2

The thumb bottom. Like the thumb top, this image is always visible and creates the two-pixel shading in the thumb bottom. This image, combined with the preceding two, creates the complete draggable thumb on the left.

butBu.gif
16x16

The bottom arrow button in its idle state. This image is always visible, except when the mouse button is pressed over it (mousedown). It is then replaced with the image below (butBd.gif) to represent the depressed button. The mousedown also calls a script routine to begin scrolling down.

butBd.gif
16x16

The bottom arrow button in its active (depressed) state. This image is initially hidden, and appears only to replace the image above (butBu.gif) when the mousedown occurs. It is hidden again upon mouseup.