Javascript Menu Back Ground Color change Simple Calculator Advanced Calculator Posh Calculator Clock 1 Clock 2 Form 1 Agree Before Entry Form 2 Mailing List Curser Effect 1 Curser Effect 2 Print This Page No Right Click Scroll 1 Scroll 2 Browser info Rainbow Text Link Highlighter Alert Button Button Scroller Color Chart Expanding Text Flashing Text Font Maker Curser Image Effect Metatag Builder Javascripts Color Chart Put this button style chart on your site to allow visitors to view your pages in different colors. To download, simply either use your cursor to highlight the script or click the highlight button , 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!!! <!--3 parts ot his script =========================================== part 1 place inside head tags =========================================== --> <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> ================================================================================= part 2 place inside <body> tag ================================================================================= onload=page_reset() or <body onload=page_reset()> ================================================================================= part 3 place in body where you want it to display ================================================================================= <table width=100% > <tr> <td width=1%> </td> <td width=98% bgcolor=black align="center"><font face=arial size=-1> 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); } /////////////////////////////////////////////////////////////////// </script> Click Here for demonstration Script from a1 Javascripts Back to Javascript Main Menu Main Menu Animations Clipart Signs/Words Arrows Backgrounds Bullets Buttons Dividers/Lines Wallpaper Javascripts Tutorials Hex color chart Site Map Disclaimer Links Home Top clipart sites Visit the Top 50 Free Graphics Land Clipart Gallery Clip-art.com Best Clipart Clipart Junction AAAClipart.com Top Freebie sites 777Top Free Sites Here Top20Free.com Top 50 free sites Best Freebie Sites Click Here Vote for Us! Top Animation sites Graphics Hunter Animation City 321 Graphics Top 100 Graphics ifree.com Top Graphics