« »

Make colored, flat-style, and blinking scrollbars... striking effects that definitely get attention. Make your scrollbar colorful.

Label: Simple JavaScript Scrollbar Maker

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE>
.color {
	BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; HEIGHT: 23px; WIDTH: 65px
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT>
<!--
function act(form)
{
var c1,c2,c3,c4
line1.style.backgroundColor="#ffffff"
face1.style.backgroundColor="#ffffff"
line2.style.backgroundColor="#ffffff"
face2.style.backgroundColor="#ffffff"
function changecontent(){
if (form.type[1].checked) {type1='"white"';type2='"gray"';type3='"white"'} else {type1='line';type2='face';type3='face'}
c1=line1.style.backgroundColor
c2=face1.style.backgroundColor
c3=line2.style.backgroundColor
c4=face2.style.backgroundColor
function clrBar(line,face)
	{
	with(document.body.style)
		{
		scrollbarDarkShadowColor=line;
		scrollbar3dLightColor=form.type[1].checked?"white":line;
		scrollbarArrowColor="black";
		scrollbarBaseColor=face;
		scrollbarFaceColor=face;
		scrollbarHighlightColor=form.type[1].checked?"white":face;
		scrollbarShadowColor=form.type[1].checked?"gray":face;
		scrollbarTrackColor="#F3F3F3";
		}
	}

function setcolor()
	{
	var w = document.body.clientWidth;
	var h = document.body.clientHeight;
	var x = event.clientX;
	var y = event.clientY;
	if(x>w) clrBar(c1,c2); // Your colors
	else clrBar(c3,c4); // A predefined theme
	}
if (document.all){clrBar(null,null);document.onmousemove=setcolor}

endtag=' scrollbars. Colors: line1 - '+c1+', line2 - '+c3+', face1 - '+c2+', face2 - '+c4+'*/\n'
text=form.type[1].checked?'/*---For 3D'+endtag:'/*---For flat'+endtag

content='<script language="JavaScript1.2">\n'
+'<!--\n'
+text
+'function clrBar(line,face)\n'
+'		{\n'
+'		with(document.body.style)\n'
+'			{\n'
+'			scrollbarDarkShadowColor=line;\n'
+'			scrollbar3dLightColor='+type1+';\n'
+'			scrollbarArrowColor="black";\n'
+'			scrollbarBaseColor=face;\n'
+'			scrollbarFaceColor=face;\n'
+'			scrollbarHighlightColor='+type3+';\n'
+'			scrollbarShadowColor='+type2+';\n'
+'			scrollbarTrackColor="#F3F3F3";\n'
+'			}\n'
+'		}\n'
+'function setcolor()\n'
+'		{\n'
+'		var w = document.body.clientWidth;\n'
+'		var h = document.body.clientHeight;\n'
+'		var x = event.clientX;\n'
+'		var y = event.clientY;\n'
+'		if(x>w) clrBar("'+c1+'","'+c2+'"); // Colors of active state\n'
+'		else clrBar("'+c3+'","'+c4+'"); // Colors of normal state\n'
+'		}\n'
+'if (document.all){\n'
+'clrBar(null,null);\n'
+'document.onmousemove=setcolor;\n'
+'}\n'
+'//------- Source Code Generator - La Minh Khanh ------ //\n'
+'-->\n<'
+'/script>'
form.codearea.value=content
}

form.gen.onclick=changecontent

form.copy.onclick=function copy() 
	{
	myForm.codearea.select(); myForm.codearea.focus();
	textRange = myForm.codearea.createTextRange();
	textRange.execCommand("RemoveFormat");
	textRange.execCommand("Copy");
	alert("The code has been copied into your clipboard!")
	}

}
//end of act()
-->
</SCRIPT>
<P>Guide: Put the generated script on the &lt;body&gt; part of your web page. Lets 
note that this script works with IE5.5+, other browsers just ignore it.</P>
<P>Color table: Enter the color number or click on a cell to choose your color.</P>
<SCRIPT>
<!--
function ilus(clr)
	{
	selhex.value=clr
	selcolor.style.backgroundColor=clr
	}
function passclr(pass)
	{
	if(selhex.value.length == 7) ilus(pass)
	}
-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload=act(document.myForm)>
<TABLE border=0 cellPadding=0 cellSpacing=1>
  <TBODY>
  <TR>

    <TD bgColor=#00ff00 height=15 onclick="ilus('#00FF00')" width=20></TD>
    <TD bgColor=#00ff33 height=15 onclick="ilus('#00FF33')" width=20></TD>
    <TD bgColor=#00ff66 height=15 onclick="ilus('#00FF66')" width=20></TD>
    <TD bgColor=#00ff99 height=15 onclick="ilus('#00FF99')" width=20></TD>
    <TD bgColor=#00ffcc height=15 onclick="ilus('#00FFCC')" width=20></TD>
    <TD bgColor=#00ffff height=15 onclick="ilus('#00FFFF')" width=20></TD>
    <TD bgColor=#00cc00 height=15 onclick="ilus('#00CC00')" width=20></TD>
    <TD bgColor=#00cc66 height=15 onclick="ilus('#00CC66')" width=20></TD>
    <TD bgColor=#00cc66 height=15 onclick="ilus('#00CC66')" width=20></TD>

    <TD bgColor=#00cc99 height=15 onclick="ilus('#00CC99')" width=20></TD>
    <TD bgColor=#00cccc height=15 onclick="ilus('#00CCCC')" width=20></TD>
    <TD bgColor=#00ccff height=15 onclick="ilus('#00CCFF')" width=20></TD>
    <TD bgColor=#009900 height=15 onclick="ilus('#009900')" width=20></TD>
    <TD bgColor=#009933 height=15 onclick="ilus('#009933')" width=20></TD>
    <TD bgColor=#009966 height=15 onclick="ilus('#009966')" width=20></TD>
    <TD bgColor=#009999 height=15 onclick="ilus('#009999')" width=20></TD>
    <TD bgColor=#0099cc height=15 onclick="ilus('#0099CC')" width=20></TD>
    <TD bgColor=#0099ff height=15 onclick="ilus('#0099FF')" width=20></TD></TR>

  <TR>
    <TD bgColor=#33ff00 height=15 onclick="ilus('#33FF00')" width=20></TD>
    <TD bgColor=#33ff33 height=15 onclick="ilus('#33FF33')" width=20></TD>
    <TD bgColor=#33ff66 height=15 onclick="ilus('#33FF66')" width=20></TD>
    <TD bgColor=#33ff99 height=15 onclick="ilus('#33FF99')" width=20></TD>
    <TD bgColor=#33ffcc height=15 onclick="ilus('#33FFCC')" width=20></TD>
    <TD bgColor=#33ffff height=15 onclick="ilus('#33FFFF')" width=20></TD>
    <TD bgColor=#33cc00 height=15 onclick="ilus('#33CC00')" width=20></TD>
    <TD bgColor=#33cc33 height=15 onclick="ilus('#33CC33')" width=20></TD>

    <TD bgColor=#33cc66 height=15 onclick="ilus('#33CC66')" width=20></TD>
    <TD bgColor=#33cc99 height=15 onclick="ilus('#33CC99')" width=20></TD>
    <TD bgColor=#33cccc height=15 onclick="ilus('#33CCCC')" width=20></TD>
    <TD bgColor=#33ccff height=15 onclick="ilus('#33CCFF')" width=20></TD>
    <TD bgColor=#339900 height=15 onclick="ilus('#339900')" width=20></TD>
    <TD bgColor=#339933 height=15 onclick="ilus('#339933')" width=20></TD>
    <TD bgColor=#339966 height=15 onclick="ilus('#339966')" width=20></TD>
    <TD bgColor=#339999 height=15 onclick="ilus('#339999')" width=20></TD>
    <TD bgColor=#3399cc height=15 onclick="ilus('#3399CC')" width=20></TD>

    <TD bgColor=#3399ff height=15 onclick="ilus('#3399FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#66ff00 height=15 onclick="ilus('#66FF00')" width=20></TD>
    <TD bgColor=#66ff33 height=15 onclick="ilus('#66FF33')" width=20></TD>
    <TD bgColor=#66ff66 height=15 onclick="ilus('#66FF66')" width=20></TD>
    <TD bgColor=#66ff99 height=15 onclick="ilus('#66FF99')" width=20></TD>
    <TD bgColor=#66ffcc height=15 onclick="ilus('#66FFCC')" width=20></TD>
    <TD bgColor=#66ffff height=15 onclick="ilus('#66FFFF')" width=20></TD>
    <TD bgColor=#66cc00 height=15 onclick="ilus('#66CC00')" width=20></TD>

    <TD bgColor=#66cc33 height=15 onclick="ilus('#66CC33')" width=20></TD>
    <TD bgColor=#66cc66 height=15 onclick="ilus('#66CC66')" width=20></TD>
    <TD bgColor=#66cc99 height=15 onclick="ilus('#66CC99')" width=20></TD>
    <TD bgColor=#66cccc height=15 onclick="ilus('#66CCCC')" width=20></TD>
    <TD bgColor=#66ccff height=15 onclick="ilus('#66CCFF')" width=20></TD>
    <TD bgColor=#669900 height=15 onclick="ilus('#669900')" width=20></TD>
    <TD bgColor=#669933 height=15 onclick="ilus('#669933')" width=20></TD>
    <TD bgColor=#669966 height=15 onclick="ilus('#669966')" width=20></TD>
    <TD bgColor=#669999 height=15 onclick="ilus('#669999')" width=20></TD>

    <TD bgColor=#6699cc height=15 onclick="ilus('#6699CC')" width=20></TD>
    <TD bgColor=#6699ff height=15 onclick="ilus('#6699FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#99ff00 height=15 onclick="ilus('#99FF00')" width=20></TD>
    <TD bgColor=#99ff33 height=15 onclick="ilus('#99FF33')" width=20></TD>
    <TD bgColor=#99ff66 height=15 onclick="ilus('#99FF66')" width=20></TD>
    <TD bgColor=#99ff99 height=15 onclick="ilus('#99FF99')" width=20></TD>
    <TD bgColor=#99ffcc height=15 onclick="ilus('#99FFCC')" width=20></TD>
    <TD bgColor=#99ffff height=15 onclick="ilus('#99FFFF')" width=20></TD>

    <TD bgColor=#99cc00 height=15 onclick="ilus('#99CC00')" width=20></TD>
    <TD bgColor=#99cc33 height=15 onclick="ilus('#99CC33')" width=20></TD>
    <TD bgColor=#99cc66 height=15 onclick="ilus('#99CC66')" width=20></TD>
    <TD bgColor=#99cc99 height=15 onclick="ilus('#99CC99')" width=20></TD>
    <TD bgColor=#99cccc height=15 onclick="ilus('#99CCCC')" width=20></TD>
    <TD bgColor=#99ccff height=15 onclick="ilus('#99CCFF')" width=20></TD>
    <TD bgColor=#999900 height=15 onclick="ilus('#999900')" width=20></TD>
    <TD bgColor=#999933 height=15 onclick="ilus('#999933')" width=20></TD>
    <TD bgColor=#999966 height=15 onclick="ilus('#999966')" width=20></TD>

    <TD bgColor=#999999 height=15 onclick="ilus('#999999')" width=20></TD>
    <TD bgColor=#9999cc height=15 onclick="ilus('#9999CC')" width=20></TD>
    <TD bgColor=#9999ff height=15 onclick="ilus('#9999FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ccff00 height=15 onclick="ilus('#CCFF00')" width=20></TD>
    <TD bgColor=#ccff33 height=15 onclick="ilus('#CCFF33')" width=20></TD>
    <TD bgColor=#ccff66 height=15 onclick="ilus('#CCFF66')" width=20></TD>
    <TD bgColor=#ccff99 height=15 onclick="ilus('#CCFF99')" width=20></TD>
    <TD bgColor=#ccffcc height=15 onclick="ilus('#CCFFCC')" width=20></TD>

    <TD bgColor=#ccffff height=15 onclick="ilus('#CCFFFF')" width=20></TD>
    <TD bgColor=#cccc00 height=15 onclick="ilus('#CCCC00')" width=20></TD>
    <TD bgColor=#cccc33 height=15 onclick="ilus('#CCCC33')" width=20></TD>
    <TD bgColor=#cccc66 height=15 onclick="ilus('#CCCC66')" width=20></TD>
    <TD bgColor=#cccc99 height=15 onclick="ilus('#CCCC99')" width=20></TD>
    <TD bgColor=#cccccc height=15 onclick="ilus('#CCCCCC')" width=20></TD>
    <TD bgColor=#ccccff height=15 onclick="ilus('#CCCCFF')" width=20></TD>
    <TD bgColor=#cc9900 height=15 onclick="ilus('#CC9900')" width=20></TD>
    <TD bgColor=#cc9933 height=15 onclick="ilus('#CC9933')" width=20></TD>

    <TD bgColor=#cc9966 height=15 onclick="ilus('#CC9966')" width=20></TD>
    <TD bgColor=#cc9999 height=15 onclick="ilus('#CC9999')" width=20></TD>
    <TD bgColor=#cc99cc height=15 onclick="ilus('#CC99CC')" width=20></TD>
    <TD bgColor=#cc99ff height=15 onclick="ilus('#CC99FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ffff00 height=15 onclick="ilus('#FFFF00')" width=20></TD>
    <TD bgColor=#ffff33 height=15 onclick="ilus('#FFFF33')" width=20></TD>
    <TD bgColor=#ffff66 height=15 onclick="ilus('#FFFF66')" width=20></TD>
    <TD bgColor=#ffff99 height=15 onclick="ilus('#FFFF99')" width=20></TD>

    <TD bgColor=#ffffcc height=15 onclick="ilus('#FFFFCC')" width=20></TD>
    <TD bgColor=#ffffff height=15 onclick="ilus('#FFFFFF')" width=20></TD>
    <TD bgColor=#ffcc00 height=15 onclick="ilus('#FFCC00')" width=20></TD>
    <TD bgColor=#ffcc33 height=15 onclick="ilus('#FFCC33')" width=20></TD>
    <TD bgColor=#ffcc66 height=15 onclick="ilus('#FFCC66')" width=20></TD>
    <TD bgColor=#ffcc99 height=15 onclick="ilus('#FFCC99')" width=20></TD>
    <TD bgColor=#ffcccc height=15 onclick="ilus('#FFCCCC')" width=20></TD>
    <TD bgColor=#ffccff height=15 onclick="ilus('#FFCCFF')" width=20></TD>
    <TD bgColor=#ff9900 height=15 onclick="ilus('#FF9900')" width=20></TD>

    <TD bgColor=#ff9933 height=15 onclick="ilus('#FF9933')" width=20></TD>
    <TD bgColor=#ff9966 height=15 onclick="ilus('#FF9966')" width=20></TD>
    <TD bgColor=#ff9999 height=15 onclick="ilus('#FF9999')" width=20></TD>
    <TD bgColor=#ff99cc height=15 onclick="ilus('#FF99CC')" width=20></TD>
    <TD bgColor=#ff99ff height=15 onclick="ilus('#FF99FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#006600 height=15 onclick="ilus('#006600')" width=20></TD>
    <TD bgColor=#006633 height=15 onclick="ilus('#006633')" width=20></TD>
    <TD bgColor=#006666 height=15 onclick="ilus('#006666')" width=20></TD>

    <TD bgColor=#006699 height=15 onclick="ilus('#006699')" width=20></TD>
    <TD bgColor=#0066cc height=15 onclick="ilus('#0066CC')" width=20></TD>
    <TD bgColor=#0066ff height=15 onclick="ilus('#0066FF')" width=20></TD>
    <TD bgColor=#003300 height=15 onclick="ilus('#003300')" width=20></TD>
    <TD bgColor=#003333 height=15 onclick="ilus('#003333')" width=20></TD>
    <TD bgColor=#003366 height=15 onclick="ilus('#003366')" width=20></TD>
    <TD bgColor=#003399 height=15 onclick="ilus('#003399')" width=20></TD>
    <TD bgColor=#0033cc height=15 onclick="ilus('#0033CC')" width=20></TD>
    <TD bgColor=#0033ff height=15 onclick="ilus('#0033FF')" width=20></TD>

    <TD bgColor=#000000 height=15 onclick="ilus('#000000')" width=20></TD>
    <TD bgColor=#000033 height=15 onclick="ilus('#000033')" width=20></TD>
    <TD bgColor=#000066 height=15 onclick="ilus('#000066')" width=20></TD>
    <TD bgColor=#000099 height=15 onclick="ilus('#000099')" width=20></TD>
    <TD bgColor=#0000cc height=15 onclick="ilus('#0000CC')" width=20></TD>
    <TD bgColor=#0000ff height=15 onclick="ilus('#0000FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#336600 height=15 onclick="ilus('#336600')" width=20></TD>
    <TD bgColor=#336633 height=15 onclick="ilus('#336633')" width=20></TD>

    <TD bgColor=#336666 height=15 onclick="ilus('#336666')" width=20></TD>
    <TD bgColor=#336699 height=15 onclick="ilus('#336699')" width=20></TD>
    <TD bgColor=#3366cc height=15 onclick="ilus('#3366CC')" width=20></TD>
    <TD bgColor=#3366ff height=15 onclick="ilus('#3366FF')" width=20></TD>
    <TD bgColor=#333300 height=15 onclick="ilus('#333300')" width=20></TD>
    <TD bgColor=#333333 height=15 onclick="ilus('#333333')" width=20></TD>
    <TD bgColor=#333366 height=15 onclick="ilus('#333366')" width=20></TD>
    <TD bgColor=#333399 height=15 onclick="ilus('#333399')" width=20></TD>
    <TD bgColor=#3333cc height=15 onclick="ilus('#3333CC')" width=20></TD>

    <TD bgColor=#3333ff height=15 onclick="ilus('#3333FF')" width=20></TD>
    <TD bgColor=#330000 height=15 onclick="ilus('#330000')" width=20></TD>
    <TD bgColor=#330033 height=15 onclick="ilus('#330033')" width=20></TD>
    <TD bgColor=#330066 height=15 onclick="ilus('#330066')" width=20></TD>
    <TD bgColor=#330099 height=15 onclick="ilus('#330099')" width=20></TD>
    <TD bgColor=#3300cc height=15 onclick="ilus('#3300CC')" width=20></TD>
    <TD bgColor=#3300ff height=15 onclick="ilus('#3300FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#666600 height=15 onclick="ilus('#666600')" width=20></TD>

    <TD bgColor=#666633 height=15 onclick="ilus('#666633')" width=20></TD>
    <TD bgColor=#666666 height=15 onclick="ilus('#666666')" width=20></TD>
    <TD bgColor=#666699 height=15 onclick="ilus('#666699')" width=20></TD>
    <TD bgColor=#6666cc height=15 onclick="ilus('#6666CC')" width=20></TD>
    <TD bgColor=#6666ff height=15 onclick="ilus('#6666FF')" width=20></TD>
    <TD bgColor=#663300 height=15 onclick="ilus('#663300')" width=20></TD>
    <TD bgColor=#663333 height=15 onclick="ilus('#663333')" width=20></TD>
    <TD bgColor=#663366 height=15 onclick="ilus('#663366')" width=20></TD>
    <TD bgColor=#663399 height=15 onclick="ilus('#663399')" width=20></TD>

    <TD bgColor=#6633cc height=15 onclick="ilus('#6633CC')" width=20></TD>
    <TD bgColor=#6633ff height=15 onclick="ilus('#6633FF')" width=20></TD>
    <TD bgColor=#660000 height=15 onclick="ilus('#660000')" width=20></TD>
    <TD bgColor=#660033 height=15 onclick="ilus('#660033')" width=20></TD>
    <TD bgColor=#660066 height=15 onclick="ilus('#660066')" width=20></TD>
    <TD bgColor=#660099 height=15 onclick="ilus('#660099')" width=20></TD>
    <TD bgColor=#6600cc height=15 onclick="ilus('#6600CC')" width=20></TD>
    <TD bgColor=#6600ff height=15 onclick="ilus('#6600FF')" width=20></TD></TR>
  <TR>

    <TD bgColor=#996600 height=15 onclick="ilus('#996600')" width=20></TD>
    <TD bgColor=#996633 height=15 onclick="ilus('#996633')" width=20></TD>
    <TD bgColor=#996666 height=15 onclick="ilus('#996666')" width=20></TD>
    <TD bgColor=#996699 height=15 onclick="ilus('#996699')" width=20></TD>
    <TD bgColor=#9966cc height=15 onclick="ilus('#9966CC')" width=20></TD>
    <TD bgColor=#9966ff height=15 onclick="ilus('#9966FF')" width=20></TD>
    <TD bgColor=#993300 height=15 onclick="ilus('#993300')" width=20></TD>
    <TD bgColor=#993333 height=15 onclick="ilus('#993333')" width=20></TD>
    <TD bgColor=#993366 height=15 onclick="ilus('#993366')" width=20></TD>

    <TD bgColor=#993399 height=15 onclick="ilus('#993399')" width=20></TD>
    <TD bgColor=#9933cc height=15 onclick="ilus('#9933CC')" width=20></TD>
    <TD bgColor=#9933ff height=15 onclick="ilus('#9933FF')" width=20></TD>
    <TD bgColor=#990000 height=15 onclick="ilus('#990000')" width=20></TD>
    <TD bgColor=#990033 height=15 onclick="ilus('#990033')" width=20></TD>
    <TD bgColor=#990066 height=15 onclick="ilus('#990066')" width=20></TD>
    <TD bgColor=#990099 height=15 onclick="ilus('#990099')" width=20></TD>
    <TD bgColor=#9900cc height=15 onclick="ilus('#9900CC')" width=20></TD>
    <TD bgColor=#9900ff height=15 onclick="ilus('#9900FF')" width=20></TD></TR>

  <TR>
    <TD bgColor=#cc6600 height=15 onclick="ilus('#CC6600')" width=20></TD>
    <TD bgColor=#cc6633 height=15 onclick="ilus('#CC6633')" width=20></TD>
    <TD bgColor=#cc6666 height=15 onclick="ilus('#CC6666')" width=20></TD>
    <TD bgColor=#cc6699 height=15 onclick="ilus('#CC6699')" width=20></TD>
    <TD bgColor=#cc66cc height=15 onclick="ilus('#CC66CC')" width=20></TD>
    <TD bgColor=#cc66ff height=15 onclick="ilus('#CC66FF')" width=20></TD>
    <TD bgColor=#cc3300 height=15 onclick="ilus('#CC3300')" width=20></TD>
    <TD bgColor=#cc3333 height=15 onclick="ilus('#CC3333')" width=20></TD>

    <TD bgColor=#cc3366 height=15 onclick="ilus('#CC3366')" width=20></TD>
    <TD bgColor=#cc3399 height=15 onclick="ilus('#CC3399')" width=20></TD>
    <TD bgColor=#cc33cc height=15 onclick="ilus('#CC33CC')" width=20></TD>
    <TD bgColor=#cc33ff height=15 onclick="ilus('#CC33FF')" width=20></TD>
    <TD bgColor=#cc0000 height=15 onclick="ilus('#CC0000')" width=20></TD>
    <TD bgColor=#cc0033 height=15 onclick="ilus('#CC0033')" width=20></TD>
    <TD bgColor=#cc0066 height=15 onclick="ilus('#CC0066')" width=20></TD>
    <TD bgColor=#cc0099 height=15 onclick="ilus('#CC0099')" width=20></TD>
    <TD bgColor=#cc00cc height=15 onclick="ilus('#CC00CC')" width=20></TD>

    <TD bgColor=#cc00ff height=15 onclick="ilus('#CC00FF')" width=20></TD></TR>
  <TR>
    <TD bgColor=#ff6600 height=15 onclick="ilus('#FF6600')" width=20></TD>
    <TD bgColor=#ff6633 height=15 onclick="ilus('#FF6633')" width=20></TD>
    <TD bgColor=#ff6666 height=15 onclick="ilus('#FF6666')" width=20></TD>
    <TD bgColor=#ff6699 height=15 onclick="ilus('#FF6699')" width=20></TD>
    <TD bgColor=#ff66cc height=15 onclick="ilus('#FF66CC')" width=20></TD>
    <TD bgColor=#ff66ff height=15 onclick="ilus('#FF66FF')" width=20></TD>
    <TD bgColor=#ff3300 height=15 onclick="ilus('#FF3300')" width=20></TD>

    <TD bgColor=#ff3333 height=15 onclick="ilus('#FF3333')" width=20></TD>
    <TD bgColor=#ff3366 height=15 onclick="ilus('#FF3366')" width=20></TD>
    <TD bgColor=#ff3399 height=15 onclick="ilus('#FF3399')" width=20></TD>
    <TD bgColor=#ff33cc height=15 onclick="ilus('#FF33CC')" width=20></TD>
    <TD bgColor=#ff33ff height=15 onclick="ilus('#FF33FF')" width=20></TD>
    <TD bgColor=#ff0000 height=15 onclick="ilus('#FF0000')" width=20></TD>
    <TD bgColor=#ff0033 height=15 onclick="ilus('#FF0033')" width=20></TD>
    <TD bgColor=#ff0066 height=15 onclick="ilus('#FF0066')" width=20></TD>
    <TD bgColor=#ff0099 height=15 onclick="ilus('#FF0099')" width=20></TD>

    <TD bgColor=#ff00cc height=15 onclick="ilus('#FF00CC')" width=20></TD>
    <TD bgColor=#ff00ff height=15 onclick="ilus('#FF00FF')" 
  width=20></TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=1>
  <TBODY>
  <TR>
    <TD bgColor=#ffffff height=15 onclick="ilus('#FFFFFF')" width=20></TD>
    <TD bgColor=#dddddd height=15 onclick="ilus('#DDDDDD')" width=20></TD>
    <TD bgColor=#c0c0c0 height=15 onclick="ilus('#C0C0C0')" width=20></TD>
    <TD bgColor=#969696 height=15 onclick="ilus('#969696')" width=20></TD>

    <TD bgColor=#808080 height=15 onclick="ilus('#808080')" width=20></TD>
    <TD bgColor=#646464 height=15 onclick="ilus('#646464')" width=20></TD>
    <TD bgColor=#4b4b4b height=15 onclick="ilus('#4B4B4B')" width=20></TD>
    <TD bgColor=#242424 height=15 onclick="ilus('#242424')" width=20></TD>
    <TD bgColor=#000000 height=15 onclick="ilus('#000000')" 
  width=20></TD></TR></TBODY></TABLE>
<P>
<INPUT class=color name=selhex onchange=passclr(this.value) value=#FFFFFF size="20"> 
<INPUT class=color name=selcolor onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Chosen color</P>
<P>1. Set color for your scrollbars when it is actived (mouse over). Tip: you 
would better set the face color lighter the line color.</P>

<P><INPUT name=s1 onclick=line1.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=line1 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Line color<BR><INPUT name=s2 onclick=face1.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=face1 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Face color</P>
<P>2. And set the colors for scrollbars in normal state here, choose the color 
you like from above table and click <B>Set Color</B>:</P>
<P><INPUT name=s3 onclick=line2.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=line2 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Line color<BR><INPUT name=s4 onclick=face2.style.backgroundColor=selcolor.style.backgroundColor type=button value="Set Color"> 
<INPUT class=color name=face2 onfocus=this.blur() size="20">&nbsp;&nbsp;&nbsp; 
Face color</P>

<P>3. Finally set a type of scrollbars you want and click <B>Generate Source 
Code</B>, you will see the illustration on scrollbars around:</P>
<FORM name=myForm>
<P><INPUT CHECKED name=type type=radio value=false>&nbsp;&nbsp;&nbsp; Flat 
scrollbars&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <INPUT name=type type=radio 
value=true>&nbsp;&nbsp;&nbsp; 3D scrollbars</P>
<P><INPUT name=gen type=button value="Generate Source Code"> <INPUT name=copy onclick=copy() type=button value="Copy into Clipboard"></P>
<P><TEXTAREA cols=85 name=codearea rows=10></TEXTAREA></P></FORM>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->