Pick Web page colors with a Form and JavaScript Event Handlers

Professor Al Fichera

Web Page Design
Practical JavaScripting... Set Background & Foreground Colors

Form Input tag with onMouseOver Changes Colors


Change the background color of this page with these buttons. What makes these buttons work is a little onclick JavaScript in the form input tag, see below for a sample of the code at work here. The first set of buttons is using the document.bgColor statement (background) to change the color of the background for the page. The second set of buttons is using the document.fgColor statement (foreground) to change the color of the text for the page.




Change the color of the text on this page with these buttons. Here's a chance to see how your text could look with the different colored backgrounds. There should be a great deal of contrast so the text can be seen by all your visitors. The second layer of colors could be used for visited hypertext links for your page.

<tr>
	<th><input type="button" name="green" id="green" style="background:#99FFCC" value="#99FFCC" onclick="document.bgColor='#99FFCC';" /></th>
	<th><input type="button" name="green" id="green" style="background:#7FFFD4" value="#7FFFD4" onclick="document.bgColor='#7FFFD4';" /></th>
	<th><input type="button" name="green" id="green" style="background:#90EE90" value="#90EE90" onclick="document.bgColor='#90EE90';" /></th>
	<th><input type="button" name="green" id="green" style="background:#98FB98" value="#98FB98" onclick="document.bgColor='#98FB98';" /></th>
	<th><input type="button" name="green" id="green" style="background:#CCFFCC" value="#CCFFCC" onclick="document.bgColor='#CCFFCC';" /></th>
	<th><input type="button" name="green" id="green" style="background:#F0FFF0" value="#F0FFF0" onclick="document.bgColor='#F0FFF0';" /></th>
  </tr>
  <tr>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#996633" class="textcolor" value="#996633" onclick="document.fgColor='#996633';" /></th>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#990000" class="textcolor" value="#990000" onclick="document.fgColor='#990000';" /></th>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#660066" class="textcolor" value="#660066" onclick="document.fgColor='#660066';" /></th>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#336600" class="textcolor" value="#336600" onclick="document.fgColor='#336600';" /></th>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#006666" class="textcolor" value="#006666" onclick="document.fgColor='#006666';" /></th>
	<th><input type="button" name="textcolor" id="textcolor" style="background:#000099" class="textcolor" value="#000099" onclick="document.fgColor='#000099';" /></th>
  </tr>

Return to Profal2 Miscellaneous DHTML