PART ONE
Installing The Script
Place this script in the of your page. You can add as many colors as you wish; see the instructions in the script. Note that the number in brackets [ ] in the backColor[ ] array is the number you will use to call each color from the changeBG(whichColor) function (see Part Two below).
Code
<script language="JavaScript">
<!--
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backColor = new Array(); // don't change this
// Enter the colors you wish to use. Follow the
// pattern to use more colors. The number in the
// brackets [] is the number you will use in the
// function call to pick each color.
backColor[0] = '#FF0000';
backColor[1] = '#00FF00';
backColor[2] = '#0000FF';
backColor[3] = '#FFFFFF';
// Do not edit below this line.
//-----------------------------
function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
//-->
</script>
PART TWO
Setting Up The Links
There are two examples below. The first shows how to set up a link so that it will change the background color on mouseOver. The second shows how to set up a link that will change the background color when clicked.
Code
<!--
Example One -- changing bg color with mouseOver.
Set the number in the () in the changeBG() function
to the number of the color in the brackets in the
backColor[] array to select a given color.
//-->
<a href="#" onMouseOver="javascript:changeBG(2)">Change</a>
<!--
Example Two -- changing bg color with a mouse click.
Set the number in the () in the changeBG() function
to the number of the color in the brackets in the
backColor[] array to select a given color.
//-->
<a href="javascript:changeBG(1)">Change</a>