I'm trying to use a javascript command to swap between different style sheets (with different color schemes) on the fly using the following code:
<link rel="stylesheet" type="text/css" href="default.css">
<link rel="alternate stylesheet" type="text/css" href="green.css" title="green">
<a href="#" onClick="setActiveStyleSheet('green', 1);return false;" title="green">
My problem is that I have a few small images that are color-coordinated with the style sheet (for example, a small arrow) and I was wondering if there was any way I could change the image as well as changing the style sheet. Or perhaps have code that detects the active style sheet and then chooses the image accordingly? I would rather not use the background-image property in div's because I find that tends to lead to weird white-space issues depending on the browser. Does anyone know if this is possible, as it would be a great help. Thanks in advance.
swapping style sheets
This is a rough example of what you could do:
<a href="#" onClick="document.images.imageName.src='newimage.gif';setActiveStyleSheet('green', 1);return false;" title="green">
The image that is going to be changed has to have an attribute
name="imageName"
Most pratical would probably be to add the image changing commands inside the js function or create a new one for the job.