DHTML Lab: Scrollbars for Netscape Navigator Layers - dhtmlab.com | 6 | WebReference

DHTML Lab: Scrollbars for Netscape Navigator Layers - dhtmlab.com | 6

Logo

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 SizeExpandedFilename/sizeUse
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.

Clear? Good. Now, let's position all these images to create a scrollbar!


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan 12, 1999
Revised: Jan 12, 1999

URL: http://www.webreference.com/dhtml/column23/NSscrGifs.html