The stylesheets on the index page (styles1.css and styles2.css) are not in the zip file. There are style1.css and style2.css stylesheets in the zip file.
The changeImage() function will always set the image's src to on.png and although the style switching code sets a cookie and remembers which stylesheet to activate on reload, nothing is done to remember which image to show.
If you're using jQuery anyway, why not put the code for the image in the $(function())?
The markup isn't valid for the DOCTYPE.
With these all in mind, changing nothing else in the archive, use this as the index page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>style switcher toggle</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="style1.css" title="styles1" media="screen">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="styles2" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/styleswitch/stylesheetToggle.js"></script>
<script type="text/javascript">
$(function()
{
var imageURL = "off.png";
if (document.images) {
var on = new Image();
on.src = "on.png";
var off = new Image();
off.src = "off.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "off.png") imageURL = "on.png";
else imageURL = "off.png";
document.images.myImage.src = imageURL;
createCookie('imageURL', imageURL, 365);
}
}
if(readCookie('imageURL') === 'on.png'){
changeImage();
}
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();
// This code loops through the stylesheets when you click the link with
// an ID of "toggler" below.
$('#toggler').bind(
'click',
function(e)
{
$.stylesheetToggle();
changeImage();
return false;
}
);
// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$('.styleswitch').bind(
'click',
function(e)
{
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
}
);
}
);
</script>
</head><body>
<a href="#" id="toggler"><img src="off.png" name="myImage" alt=""></a>
</body></html>
However, be aware that the style switcher script will not work as expected in Safari 5.x (the current version at this typing).