Background Color Change: Select
Allows your viewers to change the background color of your page by making a selection from a select box and clicking a button.Script Code
Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).The code below should be placed between the <body> and </body> tags where you want the select box and button to appear.
Example
A working sample of the script is shown below.Options
You can add more options by adding additional <option> tags to your HTML code with the value set to the next highest number and the text set to the color you will use, i.e:
<option value="1">Pink</option>
<option value="2">Light Green</option>
<option value="3">White</option>
<option value="4">Blue</option>
You can then add the new colors as described in the scolor1.js file options below.
The remainder of the options require opening the scolor1.js file.
You can edit the error message (for when the viewer clicks the button without selecting a color) by editing the bold (strong) text on the following lines of code:
case 0 : window.alert("Please select a color."); return false;
You can change the colors by editing the bold (strong) text on the following lines of code:
case 1 : new_color = "#FFCCFF"; break;
case 2 : new_color = "#CCFFCC"; break;
case 3 : new_color = "#FFFFFF"; break;
You can add more colors by adding case 4, case 5, and so on, i.e.
case 1 : new_color = "#FFCCFF"; break;
case 2 : new_color = "#CCFFCC"; break;
case 3 : new_color = "#FFFFFF"; break;
case 4 : new_color = "#0000FF"; break;
Accessibility
The form action could be set to use a server side script as a backup.