you can add multiple classes to an element by giving a space in between classnames like this
<body class="blue red green">
some html. . .
and add an onclick event handler to each button like:
<input type="button" value="change to blue" onclick="blue_bg()">
if for e.g the "change to blue" button is clicked, the blue_bg function is called, the blue class is added and the 2 other classes are removed and background is changed to blue (JQuery can b handy if u wish to use it).
COOKIES can be used to remember the user if you wish.
Thank you everyone. What I'm trying to do is rebuild a site that is very hard to update because of the three different background colors. I have to update one page in one folder then copy it to two other folders and change the css path. You will see what I mean when looking at this site. Keep in mind, I did not build this site. I just took over it.
But then it will be easier to remove, if JS is saperated from main content.
If i didn't ans. your question, its probably bcos i didn't understand it. You can help by making it clear.
I have to update one page in one folder then copy it to two other folders and change the css path. You will see what I mean when looking at this site aacwinnipeg.mb.ca
Your problem is that the home page seems to have the file extension ".html". HTML is clumsy because it does not have any variables. So, to change the background color, you have to have three versions of EVERY html pages. That's the way it is.
You can avoid having to copy the html files by using php. However:
1. You need to be familiar with the basics of passing variables in php! if not, then I suggest that you have two choices:
a) if you are being paid to maintain the site, you could point out that the color facility is cumbersome and costly in your time. If they say "so what?", just shrug and get on with it.
b) if you are maintaining the site voluntarily, I would make taking it on conditional on removing the facility! It really is not worth the hassle.
2. Otherwise, the web pages need to have the fie extension ".php" instead of ".html" to support variables. This can be a problem on the home page, So what you can do as a compromise is:
a) Locate the three versions of the home page (and their css files) in the same directory. Fortunately they already have different names: index.html, inv.html and hc.html.
b) Rename the rest of one version of the web pages ".php" instead of ".html".
c) Amend the anchors linking the web pages to simulate a GET form submission. I'm not sure whether this is documented. It's a trick I worked out for myself when rebuilding an old site like you are doing. However, it is a little complicated to put here. If you are interested I can document it.