Script Categories

Background Effects >>> Background Changer

Changes the page's background to each of the images on the page as you touch them. The background returns to white when you move your cursor off the image.

Step 1: Add the below code to the <BODY> section of your page:

/* Visit for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin

image_directory = "";
clear = new Image();  clear.src = image_directory + "clear.jpg";
pic1 = new Image();  pic1.src = image_directory + "chameleon.jpg";
pic2 = new Image();  pic2.src = image_directory + "gecko.jpg";
pic3 = new Image();  pic3.src = image_directory + "lizard.jpg";
pic4 = new Image();  pic4.src = image_directory + "toad.jpg";

function imagechange(imgName) {

document.body.background = eval(imgName + ".src");
function Load()
//  End -->
<nobr><a href="#" onMouseOver="imagechange('pic1');" onMouseOut="imagechange('clear');"><img src="chameleon.jpg"></a>
<a href="#" onMouseOver="imagechange('pic2');" onMouseOut="imagechange('clear');"><img src="gecko.jpg"></a></nobr><nobr><br>
<a href="#" onMouseOver="imagechange('pic3');" onMouseOut="imagechange('clear');"><img src="lizard.jpg"></a>
<a href="#" onMouseOver="imagechange('pic4');" onMouseOut="imagechange('clear');"><img src="toad.jpg"></a></nobr>


Step 2: The script uses five images as part of its interface. You can create your own, or use the five below (resized for easier download):

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).