JavaScript Source Code 3000: Calculators: RGB Slider
RGB Slider
Simple RGB to HEX color converter utilizing DHTML sliders. Amazing!
Click to
JavaScript Source Code 3000: Calculators: RGB Slider
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!
<!-- SIX STEPS TO INSTALL RGB SLIDER:
1. Open a new HTML document, save it as rgb-slider.html
2. Copy the coding into the HEAD of rgb-slider.html
3. Add the onLoad event handler into the BODY tag
4. Put the last coding into the BODY of rgb-slider.html
5. Put the demo button in our HTML page
6. Save all the RGB Slider images to your web site -->
<!-- STEP ONE: Create a new document, save it as rgb-slider.html -->
<!-- STEP TWO: Put this code in the HEAD of your HTML document -->
<HEAD>
<style type="text/css">
<!--
#subtext { font-family:helvetica,arial; font-size:8pt; background-color:#CCCCCC; layer-background-color:#CCCCCC;}
#title { font-family:helvetica,arial; font-size:13pt; font-weight:bold; }
#red { position:absolute; left:54; top:100; width:256; height:10; z-index:1; visibility:visible; background-image:url(redback.gif); layer-background-image:url(redback.gif); clip:rect(0px 256px 10px 0px);}
#green { position:absolute; left:54; top:120; width:256; height:10; z-index:1; visibility:visible; background-image:url(greenback.gif); layer-background-image:url(greenback.gif); clip:rect(0px 256px 10px 0px);}
#blue { position:absolute; left:54; top:140; width:256; height:10; z-index:1; visibility:visible; background-image:url(blueback.gif); layer-background-image:url(blueback.gif); clip:rect(0px 256px 10px 0px);}
#redSlider { position:absolute; left:50; top:98; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#greenSlider { position:absolute; left:50; top:118; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#blueSlider { position:absolute; left:50; top:138; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);}
#display { position:absolute; left:320; top:100; width:50px; height:50px; z-index:1; visibility:visible; background-color:#000000; layer-background-color:#000000; }
#hexValue { position:absolute; left:54; top:160; width:320; height:20; z-index:1; visibility:visible;}
#titleBar { position:absolute; left:54; top:70; width:320; height:20; z-index:1; background-color:#DDDDDD; layer-background-color:#DDDDDD;}
#colorTable { position:absolute; left:380; top:70; width:320; height:200; z-index:1; visibility:visible;}
//-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Andrew Houser (houser@houserdesign.com) -->
<!-- Web Site: http://www.houserdesign.com -->
<! >
<! >
<!-- Begin
function init() {
ns4 = (document.layers)?true:false;
ie4 = (document.all)?true:false;
sliderMin = 50;
sliderMax = 306;
rValue=0;
gValue=0;
bValue=0;
r1 = '0';
r2 = '0';
g1 = '0';
g2 = '0';
b1 = '0';
b2 = '0';
Rgb = '0';
rGb = '0';
rgB = '0';
rActive = false;
gActive = false;
bActive = false;
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
if (ns4) {
domRed = document.redSlider;
domRed.xpos = parseInt(domRed.left);
domRed.ypos = parseInt(domRed.top);
domRed.w = domRed.clip.width;
domRed.h = domRed.clip.height;
domGreen = document.greenSlider;
domGreen.xpos = parseInt(domGreen.left);
domGreen.ypos = parseInt(domGreen.top);
domGreen.w = domGreen.clip.width;
domGreen.h = domGreen.clip.height;
domBlue = document.blueSlider;
domBlue.xpos = parseInt(domBlue.left);
domBlue.ypos = parseInt(domBlue.top);
domBlue.w = domBlue.clip.width;
domBlue.h = domBlue.clip.height;
domDisplay = document.display;
domValue = document.hexValue.document.frmValue.valueDisp;
domredValue = document.hexValue.document.frmValue.RgbDisp;
domgreenValue = document.hexValue.document.frmValue.rGbDisp;
domblueValue = document.hexValue.document.frmValue.rgBDisp;
}
else {
domRed = redSlider.style;
domRed.xpos = redSlider.offsetLeft;
domRed.ypos = redSlider.offsetTop;
domRed.w = redSlider.clientWidth;
domRed.h = redSlider.clientHeight;
domGreen = greenSlider.style;
domGreen.xpos = greenSlider.offsetLeft;
domGreen.ypos = greenSlider.offsetTop;
domGreen.w = greenSlider.clientWidth;
domGreen.h = greenSlider.clientHeight;
domBlue = blueSlider.style;
domBlue.xpos = blueSlider.offsetLeft;
domBlue.ypos = blueSlider.offsetTop;
domBlue.w = blueSlider.clientWidth;
domBlue.h = blueSlider.clientHeight;
domDisplay = display;
domValue = frmValue.valueDisp;
domredValue = frmValue.RgbDisp;
domgreenValue = frmValue.rGbDisp;
domblueValue = frmValue.rgBDisp;
}
hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
}
function mouseDown(e) {
if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true;
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (x > domRed.xpos && x < domRed.xpos+domRed.w && y > domRed.ypos && y < domRed.ypos+domRed.h){ rActive = true; dragObject = domRed; }
if (x > domGreen.xpos && x < domGreen.xpos+domGreen.w && y > domGreen.ypos && y < domGreen.ypos+domGreen.h){ gActive = true; dragObject = domGreen; }
if (x > domBlue.xpos && x < domBlue.xpos+domBlue.w && y > domBlue.ypos && y < domBlue.ypos+domBlue.h){ bActive = true; dragObject = domBlue; }
if (rActive==true || gActive==true || bActive==true){
if (x>=dragObject.xpos && x<=dragObject.xpos+dragObject.w) {
dragObject.dragOffsetX = x-dragObject.xpos
}
return false
}
else {
return true
}
}
function mouseMove(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft;
var y = (ns4)? e.pageY : event.y+document.body.scrollTop;
if (rActive) {
rMoveTo = x-dragObject.dragOffsetX;
if (rMoveTo > sliderMax) rMoveTo = 306;
if (rMoveTo < sliderMin) rMoveTo = 50;
domRed.xpos = rMoveTo;
domRed.left = domRed.xpos;
rValue = (domRed.xpos+4)-50;
calcValue(rMoveTo-50, 'red');
}
if (gActive) {
gMoveTo = x-dragObject.dragOffsetX;
if (gMoveTo > sliderMax) gMoveTo = sliderMax;
if (gMoveTo < sliderMin) gMoveTo = sliderMin;
domGreen.xpos = gMoveTo;
domGreen.left = domGreen.xpos;
gValue = (domGreen.xpos+4)-50;
calcValue(gMoveTo-50, 'green');
}
if (bActive) {
bMoveTo = x-dragObject.dragOffsetX;
if (bMoveTo > sliderMax) bMoveTo = sliderMax;
if (bMoveTo < sliderMin) bMoveTo = sliderMin;
domBlue.xpos = bMoveTo;
domBlue.left = domBlue.xpos;
bValue = (domBlue.xpos+4)-50;
calcValue(bMoveTo-50, 'blue');
}
return true
}
function mouseUp(e) {
var x = (ns4)? e.pageX : event.x+document.body.scrollLeft
var y = (ns4)? e.pageY : event.y+document.body.scrollTop
rActive = false;
gActive = false;
bActive = false;
return true
}
function calcValue(base, color) {
base -= 1;
if (base < 16) { first = 0; }
else { first = parseInt(base/16); }
if (base < 0 ) { second = 0; base = 0; }
else { second = parseInt(base%16); }
c1=hexArray[first];
c2=hexArray[second];
if (color == 'red') { r1 = c1; r2 = c2; Rgb=base; }
else if (color == 'green') { g1 = c1; g2 = c2; rGb=base; }
else { b1 = c1; b2 = c2; rgB=base; }
domValue.value = eval('"'+r1+r2+g1+g2+b1+b2+'"');
domredValue.value = eval('"'+Rgb+'"');
domgreenValue.value = eval('"'+rGb+'"');
domblueValue.value = eval('"'+rgB+'"');
if (ns4) { domDisplay.bgColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
else { domDisplay.style.backgroundColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); }
return true;
}
function manualSet(value,color) {
if (value < 0) value=0;
if (value > 255) value=255;
++value;
calcValue(value,color);
if (color == 'red'){ domRed.xpos = value+sliderMin-4; domRed.left = domRed.xpos; }
else if (color == 'green'){ domGreen.xpos = value+sliderMin-4; domGreen.left = domGreen.xpos; }
else { domBlue.xpos = value+sliderMin-4; domBlue.left = domBlue.xpos; }
}
function convertHex(hexString) {
if(hexString == null) hexString = domValue.value;
inputHexArray = new Array(6);
for(i=0;i<=5;++i) {
inputHexArray[i] = hexString.charAt(i);
}
for(i=0;i<=5;++i) {
tempHexVal = inputHexArray[i];
for(j=0;j<=15;++j) {
if(tempHexVal == hexArray[j]) tempHexVal = j;
}
inputHexArray[i] = tempHexVal;
}
Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1;
calcValue(Rgb,'red');
manualSet(Rgb,'red');
rGb = (inputHexArray[2]*16)+inputHexArray[3]+1;
calcValue(rGb,'green');
manualSet(rGb,'green');
rgB = (inputHexArray[4]*16)+inputHexArray[5]+1;
calcValue(rgB,'blue');
manualSet(rgB,'blue');
}
// End -->
</script>
</HEAD>
<!-- STEP THREE: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="init()">
<!-- STEP FOUR: Copy this code into the BODY of your HTML document -->
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="redSlider"></div>
<div id="greenSlider"></div>
<div id="blueSlider"></div>
<div id="colorTable">
<table border=0 cellpadding=0 cellspacing=1>
<tr><td colspan=18 align=center id="subtext">Standard 216 Color Palette</td></tr>
<script>
<!--
clr = new Array('00','33','66','99','CC','FF');
for(k=0;k<6;++k){
for(j=0;j<6;){
document.write('<tr>\n');
for(m=0;m<3;++m){
for(i=0;i<6;++i){
document.write('<td bgcolor=#'+clr[k]+clr[j+m]+clr[i]+'>');
document.write('<a href="javascript:void(null)" ');
document.write('onClick="convertHex(\''+clr[k]+clr[j+m]+clr[i]+'\')\;">');
document.write('<img src=blankgif width=10 height=10 border=0></a></td>\n');
}
}
j+=3;
document.write('</tr>\n');
}
}
//-->
</script>
</table>
</div>
<div id="display"><img src="blank.gif" width=50 height=50 border=0></div>
<div id="titleBar">
<table border=0 cellpadding=2 cellspacing=0 width=320>
<tr>
<td id="title">Houser's RGB2HEX DHTML App</td>
</tr>
</table>
</div>
<div id="hexValue"><form name="frmValue">
<table border=0 cellpadding=2 cellspacing=0 width=320 bgcolor=#EEEEEE>
<tr>
<td align=center>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td id="subtext">Red</td>
<td id="subtext">Green</td>
<td id="subtext">Blue</td>
</tr>
<tr>
<td><input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,'red');"></td>
<td><input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,'green');"></td>
<td><input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,'blue');"></td>
</tr>
</table>
</td>
<td align=center>
<table border=0 cellpadding=2 cellspacing=0>
<tr>
<td id="subtext">Hexdecimal</td>
</tr>
<tr>
<td><input type=text size=6 maxlength=6 name="valueDisp" value="000000" onBlur="convertHex();"></td>
</tr>
</table>
</td>
</tr>
</table></form>
</div>
<!-- STEP FIVE: Put this code on the page where you want to open the RGB Slider script -->
<form>
<input type=button value="Open RGB Slider" onClick="window.open('rgb-slider.html','sliderdemo', 'width=600,height=300,left=150,top=150');"></form><P>
<!-- STEP SIX: Save all the RGB Slider images to your web site -->
<!-- All the images are included in the ZIP file at:
../img/rgb-slider/rgb-slider.zip
Upload all the images to the same directory where you will use the RGB Slider script. -->
<!-- Script Size: 10.47 KB -->
Wyszukiwarka