Color Chart and Background Color Changer

[Total: 0    Average: 0/5]

This script enables the user to change the background color by clicking on the

Init Code:

page_reset();

Body Code:

<script>
//javascript written by ers
function page_reset() {
document.chart_lbls.cur_col.value = "#FFFFFF";
ClearCombo();
}

function Mod(pNum1, pNum2) { return pNum1-Math.floor(pNum1/pNum2)*pNum2 }

function rgb_get_chars(pNumber)
//fed 0 to 255, returns 2 char string, ers
{
var pos1_num = Math.floor(pNumber/16)
var pos1_char = rgb_get_char(pos1_num);
var pos2_num = Mod(pNumber,16);
var pos2_char = rgb_get_char(pos2_num);
var result = pos1_char+pos2_char;
return result;
}
function rgb_get_char(pNumber)
//fed 0 to 16, returns 1 char string ers
{
var hex= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
result = hex[pNumber]
return result;
}

function rgb_main(pired_num, pigreen_num, piblue_num) {
var result = "";
result = rgb_get_chars(pired_num);
result = result + rgb_get_chars(pigreen_num);
result = result + rgb_get_chars(piblue_num);
return result;
}

function chng_bg(pscolor) {
var sbg_color = "#"+pscolor;
document.bgColor = sbg_color;
document.chart_lbls.cur_col.value = sbg_color;
}

function last_3(pstring) {
if (pstring.length < 3) {pstring="   "+pstring;}
var ilength=pstring.length;
var result = pstring.substring(ilength-3,ilength);
return result;
}

///////////////////////////////////////////////////////////////////
//start combo boxes
///////////////////////////////////////////////////////////////////
//remark - note that cbo_onchange is not automatically called by prev/next buttons
//cbo box scripts by eric sprague
//-----------------------------------------------------------------
red_cur = 255;
green_cur = 255;
blue_cur = 255;
bkeep_bg = false;
//-----------------------------------------------------------------
function next(pcolor) {
if (pcolor=='red') {
if (red_cur+1 <= 255) {
document.chart_lbls.red_combo.selectedIndex = ++red_cur;
   }
} //end red if
else if (pcolor=='green') {
if (green_cur+1 <= 255) {
document.chart_lbls.green_combo.selectedIndex = ++green_cur;
   }
} //end green if
else if (pcolor=='blue') {
if (blue_cur+1 <= 255) {
document.chart_lbls.blue_combo.selectedIndex = ++blue_cur;
   }
} //end blue if
cbo_onchange(pcolor);
} //end funct
//-----------------------------------------------------------------
function previous(pcolor) {
if (pcolor=='red') {
if (red_cur-1 >= 0) {
document.chart_lbls.red_combo.selectedIndex = --red_cur;
   }
} //end red if
if (pcolor=='green') {
if (green_cur-1 >= 0) {
document.chart_lbls.green_combo.selectedIndex = --green_cur;
   }
} //end green if
if (pcolor=='blue') {
if (blue_cur-1 >= 0) {
document.chart_lbls.blue_combo.selectedIndex = --blue_cur;
   }
} //end blue if
cbo_onchange(pcolor);
} //end funct
//-----------------------------------------------------------------
function cbo_onchange(pcolor) {
if (pcolor=='red') {
red_cur = document.chart_lbls.red_combo.selectedIndex;
} //end red
else if (pcolor=='green') {
green_cur = document.chart_lbls.green_combo.selectedIndex;
} //end green
else if (pcolor=='blue') {
blue_cur = document.chart_lbls.blue_combo.selectedIndex;
} //end blue
//now change the 6 char code if necessary
sbg_color = rgb_main(red_cur, green_cur, blue_cur);
//now change the background if necessary
chng_bg(sbg_color);
} //end funct
//-----------------------------------------------------------------
function ClearCombo() {
document.chart_lbls.red_combo.selectedIndex=255;
document.chart_lbls.green_combo.selectedIndex=255;
document.chart_lbls.blue_combo.selectedIndex=255;
}
//-----------------------------------------------------------------
function change_combo(pcolor, pnumber) {
if (pcolor=='red') {
red_cur = pnumber;
document.chart_lbls.red_combo.selectedIndex = red_cur;
} //end red
else if (pcolor=='green') {
green_cur = pnumber;
document.chart_lbls.green_combo.selectedIndex = green_cur;
} //end green
if (pcolor=='blue') {
blue_cur = pnumber;
document.chart_lbls.blue_combo.selectedIndex = blue_cur;
} //end blue
} //end funct
//-----------------------------------------------------------------
function btn_change_combos(pired, pigreen, piblue, pshexchars) {
change_combo('red', pired);
change_combo('green', pigreen);
change_combo('blue', piblue);
chng_bg(pshexchars)
}
//-----------------------------------------------------------------
function next_wrap(pcolor, pireps) {
for (icounter = 1; icounter <= pireps; icounter++)
{next(pcolor);} //end for
} //end funct
//-----------------------------------------------------------------
function prev_wrap(pcolor, pireps) {
for (icounter = 1; icounter <= pireps; icounter++)
{previous(pcolor);} //end for
} //end funct
//-----------------------------------------------------------------
///////////////////////////////////////////////////////////////////
//end combo boxes
///////////////////////////////////////////////////////////////////
</script>

<font face=arial size=2>
<table width=100% >
<tr>
<td width=1%>
</td>
<td width=98% bgcolor=white align="center">
Click on a red,grn,blu button or change the values in the combo boxes and watch the bkgrnd change.
</td>
<td width=1%>
</td>
</tr>
</table>
<form name="chart_lbls">
<center>
<input type="text" disabled value="#FFFFFF" name="cur_col" 
style="background-color:white" size=8>
<br>
<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:red" onClick="prev_wrap('red',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:red" onClick="previous('red');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="red_combo" onChange="cbo_onchange('red');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:red" onClick="next('red');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:red" onClick="next_wrap('red',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>

<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:green" onClick="prev_wrap('green',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:green" onClick="previous('green');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="green_combo" onChange="cbo_onchange('green');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:green" onClick="next('green');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:green" onClick="next_wrap('green',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>

<table border=0 cols=3 width=150 align=center>
<tr>
<td width=10% align=right>
<input type=button value="- 016" style="background-color:#0091FF" onClick="prev_wrap('blue',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=right>
<input type=button value="- 001" style="background-color:#0091FF" onClick="previous('blue');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=60% align=center>
<select name="blue_combo" onChange="cbo_onchange('blue');">
<script>
for (icount = 0; icount <= 255; icount++)
{
document.write('<option value='+icount+'>'+icount+'');
}
</script>
</select>
</td>
<td width=10% align=left>
<input type=button value="+ 001" style="background-color:#0091FF" onClick="next('blue');" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
<td width=10% align=left>
<input type=button value="+ 016" style="background-color:#0091FF" onClick="next_wrap('blue',16);" style="font:8pt verdana,helvetica,arial; text-align:center">
</td>
</tr>
</table>
</center>
</form>
</font>

<script>
function z_test(picolor_num) {
alert ('testing...' + picolor_num);
}
///////////////////////////////////////////////////////////////////
//start writing chart
///////////////////////////////////////////////////////////////////
var icounter=0;
for (ir = 0; ir <= 3; ir++)
{
for (ib = 0; ib <= 3; ib++)
{
for (ig = 0; ig <= 3; ig++)
{
ired=85*ir; iblue=85*ib; igreen=85*ig;
scolor=rgb_main(ired,igreen,iblue); 
slbl=last_3("000"+ired)+","+last_3("000"+igreen)+","+last_3("000"+iblue);
//document.write('<input type=submit style="background-color:#'+scolor+'" value=" ' +slbl+ ' " onclick=chng_bg("'+scolor+'")>');
document.write('<input type=submit style="background-color:#'+scolor+'" value=" ' +slbl+ ' " onclick=btn_change_combos('+ired+','+igreen+','+iblue+',"'+scolor+'")>');
icounter=icounter+1;
imod=Mod(icounter, 4)
//if (imod==0) {document.write('<br>');}
} //igreen
} //iblue
} //ired
///////////////////////////////////////////////////////////////////
//end writing chart
///////////////////////////////////////////////////////////////////
</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *