Phiên bản đầy đủ: jsB@nk » Ứng dụng » Tùy biến màu cho thanh trượt
URL: https://www.javascriptbank.com/simple-javascript-scrollbar-maker.html
Trình đơn giản để tùy biến màu cho thanh trượt như màu mặc định, màu khi rê con trỏ chuột, kiểu... sau đó xuất sang mã HTML và JavaScript.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Tùy biến màu cho thanh trượt
URL: https://www.javascriptbank.com/simple-javascript-scrollbar-maker.html
<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--><SCRIPT><!--function act(form){var c1,c2,c3,c4line1.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.backgroundColorc2=face1.style.backgroundColorc3=line2.style.backgroundColorc4=face2.style.backgroundColorfunction 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 colorselse 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'+endtagcontent='<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=changecontentform.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 <body> 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=clrselcolor.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--><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"> 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"> 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"> 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"> 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"> 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> Flat scrollbars <INPUT name=type type=radio value=true> 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-->