My site has that. so I'll help out.
Save this JS as 'styleswitcher.js' in your site's directory. Here is the JS code that the file 'styleswitcher.js' should have:
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
Don't ask about that code above, I didn't write it.
Then...
Make sure your CSS files are saved separately, and are not part of the HTML page. You should have something like this at the head of your HTML page.
<link rel="stylesheet" type="text/css" href="style1.css">
That code will make 'style1.css' the starting CSS when you enter the page. Add these after the code above, also, in the head of the HTML.
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="style1title">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2title">
To add more than 2, just follow the same pattern.
And to top of the head code for this, add the code below after the code above.
<script type="text/javascript" src="styleswitcher.js"></script>
Now for the link that will change the CSS files.
Put something like this to change the CSS files around.
<a href="#" onclick="setActiveStyleSheet('style1title'); return false;" > Click here to change the CSS to style1.</a>
<a href="#" onclick="setActiveStyleSheet('style2title'); return false;" > Click here to change the CSS to style2.</a>
[hr]
That should work...