WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column23

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.

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

Produced by Peter Belesis and

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2 · Create Multilingual Web Sites with Windows Unicode Fonts Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com Eight Reasons Why Oracle's Acquisition of Sun isn't All Bad · The New Threat to Data Center Security: The Underground Economy · Buyers' Guide: Choosing a Payment Gateway Provider

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

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