The selection box below uses JavaScript to allow a visitor to a page to choose the background colour.
As you can see if you look at the source of this page (shown in the white box below), this is a particularly easy little form which has quite a dramatic effect.
<FORM>
<SELECT onChange="document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="#40E0D0"> Turquoise
<OPTION VALUE="#2E8B57"> Sea Green
<OPTION VALUE="#87CEEB"> Sky Blue
<OPTION VALUE="#D8D8BF"> Wheat
<OPTION VALUE="#FFFFFF" SELECTED> White
<OPTION VALUE="#856363"> Dusty Rose
<OPTION VALUE="#238E23"> Forest Green
<OPTION VALUE="#007FFF"> Slate Blue
</SELECT>
</FORM>
|
You can do the same thing with buttons, too:
The source code for these buttons is shown in the white box below:
<form>
<input type = "button" value = "silver" onclick= "document.bgColor='silver'">
<input type = "button" value = "white" onclick= "document.bgColor='white'">
<input type = "button" value = "yellow" onclick= "document.bgColor='yellow'">
<input type = "button" value = "blue - yuck" onclick= "document.bgColor='blue'">
<input type = "button" value = "light grey" onclick= "document.bgColor='lightgrey'">
<input type = "button" value = "light blue" onclick= "document.bgColor='lightblue'">
<input type = "button" value = "pink" onclick= "document.bgColor='pink'">
</form>
|
And you can use either colour codes or names (for example, you can use either the hexadecimal #FFFFFF or the word 'White'). For more details on colours, check out the page on colours in lesson 2 of the main site (not linked to here in order to avoid duplicating the site in this second window).