How to change HTML's scrollbar color...any script?

Hi,

Here is a small Java Script for you.

Script: Change Scrollbar Color Dynamically

Functions: Changes the color of the scrollbars in a page dynamically, via a simple JavaScript function;

shows how to attach the scrollbar color changefunction to links and to mouseOver and otherevents.

============================================================

Step 1. Optional Style

This is optional. If you leave it out, the browser will show

the standard default color for the scrollbars (usually that

is #C0C0C0). If you include this style, then you can set

the initial scrollbar color to whatever you wish -- just

change the #C0C0C0 to whatever color is required.

The <style> ... </style> goes in the head of your

page:

<style>

body{

scrollbar-base-color: #C0C0C0

}

</style>

============================================================

Step 2. The Script

Put the following <script ... ></script> in the head of

your page. No modifications are needed:

<script>

// (C) 2001 www.CodeLifter.com

// http://www.codelifter.com

// Free for all users, but leave in this header

function changeScrollbarColor(C){

if (document.all){

document.body.style.scrollbarBaseColor = C

}

}

</script>

============================================================

Step 3. Calling the Script

To set the color, just change the #FFFFFF format colors in

the parentheses. (Careful to get the syntax with the single

and double quotes just right!)

Usually, you'll attach the function to a link. Here's the

actual code from our page, up above:

<a href="javascript:changeScrollbarColor('#FF0000')">Change to Red</a>

<a href="javascript:changeScrollbarColor('#FF8000')">Change to Orange</a>

<a href="javascript:changeScrollbarColor('#FFFF00')">Change to Yellow</a>

<a href="javascript:changeScrollbarColor('#00FF00')">Change to Green</a>

<a href="javascript:changeScrollbarColor('#4444FF')">Change to Blue</a>

You can also, of course, call the code from any mouse event;

for instance, try sliding your mouse over this, also from

our page above, for an interesting effect:

<a href="#" onMouseOver="changeScrollbarColor('#FF0000')">Change to Red</a>

<a href="#" onMouseOver="changeScrollbarColor('#FF8000')">Change to Orange</a>

<a href="#" onMouseOver="changeScrollbarColor('#FFFF00')">Change to Yellow</a>

<a href="#" onMouseOver="changeScrollbarColor('#00FF00')">Change to Green</a>

<a href="#" onMouseOver="changeScrollbarColor('#4444FF')">Change to Blue</a>

Obviously, you can carry this further, using onMouseOut,

onClick, or other events.

I hope this will help you.

Thanks

Bakrudeen

bakrudeen_indts at 2007-6-29 1:11:36 >