Background Color Change on Mouseover

This script will allow your viewers to change the background color of your page when they move the mouse over a link.

Script Code

Grab a copy of the file below and place it in the same directory as the Web page on which you will use the script (if you wish to place the script file in a different directory you will need to make the necessary adjustments to the src attribute of the script tag that calls it).

scolor1.js

The code below should be placed between the <body> and </body> tags where you want the links to appear.

Example

A working sample of the script is shown below.

Pink Light Green White

Options

You can add more links by adding additional <a> tags to your HTML code the a class name of change_bg. You can then change the link text to the color you desire. If you add additional links, you will want to change the scolor1.js file to add the additional colors. The order of the links on your page will determine the order of your color list in the code.

The remainder of the options require opening the scolor1.js file.

You can change the default color by editing the bold (strong) text on the following line of code:

var default_color = "#FFFFFF";

You can change the other colors in similar fashion by editing the following lines of code:

bg_colors[0] = "#FFCCFF"; // first link
bg_colors[1] = "#CCFFCC"; // second link
bg_colors[2] = "#FFFFFF"; // third link

You can add more colors by adding bg_colors[3], bg_colors[4], and so on, i.e.

bg_colors[0] = "#FFCCFF"; // first link
bg_colors[1] = "#CCFFCC"; // second link
bg_colors[2] = "#FFFFFF"; // third link
bg_colors[3] = "#FF33FF";
bg_colors[4] = "#0000FF";

You can make any of these use your default color by inserting default_color without quotes instead of a quoted color code, i.e.

bg_colors[0] = "#FFCCFF"; // first link
bg_colors[1] = "#CCFFCC"; // second link
bg_colors[2] = default_color; // third link

Accessibility

The links could be set to link to a page with a style sheet that uses the background color described by the link text. Since a background color is mostly decorative, it may not be a big issue if JavaScript is turned off and the color doesn't change, but a backup set of HTML pages for each color or a server-side script would suffice if necessary to make it work if the link is clicked.