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.
Copyright © 1998-2010
The Web Design Resource. All rights reserved. See script or author's information for copyright information on the
individual scripts and/or writing.
Disclaimer