To change the Back Ground Color using Java Script

thiruvasagamani · Aug 15, 2008, 06:56 PM

Use this script to change the color of the page background from a link. Can be done by using a regular (clicked) link, or a mouseOver.

Code Select


<!-- TWO STEPS TO INSTALL BACKGROUND COLOR-CHANGE:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// 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] = '#FFC0C0';
backColor[3] = '#FFFFFF';

// Do not edit below this line.

function changeBG(whichColor){
document.bgColor = backColor[whichColor];
}
//  End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<!--
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 by placing mouse over link</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 by clicking on link</a>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.79 KB -->

Discussion Community

News:

To change the Back Ground Color using Java Script

thiruvasagamani