Webwork
/
Color Change Scripts

Changing an element's background color

Changing the page's background color requires a very simple script:

Head:
<script language="JavaScript">
function changeBGC(color) {
document.body.style.backgroundColor = color;
}
</script>
Body:
<a href="javascript:;" onMouseOver="javascript:changeBGC('#ccc');return false", onMouseOut="javascript:changeBGC('#fff');return false"" >Make background gray</a>
Web page:

This is the same script using styled divs as triggers and onClick instead of onMouseOver:

Head:
<script language="JavaScript">
function changeBGC(color) {
document.body.style.backgroundColor = color;
}
</script>
Body (only one button as example):
<style type="text/css" media="screen">
.bluebutton {
color: #fff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #009;
border-color: #000; }
</style>
<form>
<input class="bluebutton" type='button' value='Blue Background'
onClick="javascript:changeBGC('#009');return false">
</form>
Web page:

This is a similar application that changes the background color of a structural element (in this case a div but could be any other structural element) rather than the whole document:


Body:
<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#fff'; void(0);" style="color: #000; background: #fff; border: 1px solid #000; padding: 2px; font-size: 9px; ">White</a>

<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#999'; void(0);" style="color: #fff; background: #999; border: 1px solid #000; padding: 2px; font-size: 9px; ">Gray</a>

<a href="javascript:var thediv=document.getElementById
('div9').style; thediv.backgroundColor='#000'; void(0);" style="color: #fff; background: #000; border: 1px solid #999; padding: 2px; font-size: 9px; ">Black</a><br />
Web page:
Previous | Webwork Table of Contents | Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma