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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com