A Slacker's Guide to DHTML: Change Scroll Bar Color MouseOver

DHTML SCRIPTS

Menu/Navigation
Special Effects
Images
Forms
Text/Announcements
Windows/Pop-ups
Clocks/Countdowns
Miscellaneous

Scroll Bar Color Changer
(IE 5.5 Only)

Instructions: the colors can be changed quite easily. There are five themes that come with this script. Locate this part of the code:
scrollBar(null,null,"neo")
Instead of "neo", you can also use "blue", "orange", "red", and "green".

This goes in the BODY of your document.

Select All & Copy

//onMouseover Scrollbar effect- by Svetlin Staev (svetlins@yahoo.com)
//Submitted to Dynamic Drive
//Visit http://www.dynamicdrive.com for this script

/*---------------[IE 5.5 Scrollbars colorer]--------------------*/
function scrollBar(line,face,theme)
	{
		if (!line||!face)
			{
				line=null;
				face=null;
				switch(theme) // Predefined themes
					{
						case "blue":
							var line="#78AAFF";
							var face="#EBF5FF";
							break;
						case "orange":
							var line="#FBBB37";
							var face="#FFF9DF";
							break;
						case "red":
							var line="#FF7979";
							var face="#FFE3DD";
							break;
						case "green":
							var line="#00C600";
							var face="#D1EED0";
							break;
						case "neo":
							var line="#BC7E41";
							var face="#EFE0D1";
							break;
					}
			}

with(document.body.style)
					{
						scrollbarDarkShadowColor=line;
						scrollbar3dLightColor=line;
						scrollbarArrowColor="black";
						scrollbarBaseColor=face;
						scrollbarFaceColor=face;
						scrollbarHighlightColor=face;
						scrollbarShadowColor=face;
						scrollbarTrackColor="#F3F3F3";
					}
			}

/*------------------[Pointer coordinates catcher]---------------*/
function colorBar(){
		var w = document.body.clientWidth;
		var h = document.body.clientHeight;
		var x = event.clientX;
		var y = event.clientY;
		if(x>w) scrollBar('#000080','#BFDFFF'); // Your colors
		else scrollBar(null,null,"neo"); // A predefined theme
	}

if (document.all){
scrollBar(null,null,"neo");
document.onmousemove=colorBar;
}
//-->
</script>

Home - Sitemap
Complete HTML Guide - Free Downloads for Webmasters - Tips & Tricks - Tag Reference
Style Sheets Tutorial - JavaScript Library - Dynamic HTML Script Library - XHTML Primer

dhtml/fx/scrollbarcolor.html

BIGGER ARCHIVES
MORE INFO
Everything I am not

http://www.dynamicdrive.com
http://www.dhtmlzone.com
http://www.dhtmlshock.com

Just about every Dynamic HTML script on this site is ©opyright Dynamicdrive.com, DHTML Zone, DHTML Shock, or the person whose name appears in the credits to the script. Let it be known that I wrote NONE of them.