I want to make a style sheet switcher that allows visitors to select a wide variety of alternate style sheets independently from one another. If you visit my page at
http://www.geoworld.org/ref/geog/area/, look at the navigation menu in the top right corner, click "Control Panel," then look under "Choose a Theme," you'll see the names of the continents and oceans. Clicking any particular link highlights table rorws that correspond to nations that are in that continent or ocean.

I'd like to change it so that visitors can highlight just one continent (e.g. Africa), two continents (Africa and Eurasia) or three or more continents. I'd also like to rig it so that they can alter the background color/design or font style without disturbing the table settings they've already chosen.

I THINK I've finally found the solution, at

If you scroll down to...


HTML Example files (PC Zip Format, 5 KB)

You'll see the file I downloaded. I got it to work on my webpage - on my computer anyway, at first. When I replace the style sheets with my own alternate style sheets, the bottom form still worked but not the top form. After I published them online, neither one works.

(You can see the style switcher form at http://www.geoworld.org/ref/geog/area/, just under the navigation menu. The top form will say, - Select Style -, Europe or Asia, while the bottom form lists Africa and the oceans.)

Anyway, I must be getting close, but I don't know enough about manipulating JavaScript to make it work. I think I'd like to scrap the form and just use text links. Anyway, does anyone have any tips for making this thing work?