Thank you very much to both of you for your help.
@osgood_, I have first attemtped your stylesheet switcher, I should have made this clear before but I am very new, bad and illiterate with coding. So this may seem incredibly stupid but I am stuck at a certain point in the tutorial: under the heading "The jQuery".
I am not sure where to put this code, as it is not used in the HTML example. Is the jQuery a seperate file? The reason I ask is because I see at the top of the exmaple's code: "<script type="text/javascript" language="javascript" src="../../js/jquery/jquery.cookie.js"></script>". I currently have no ".js" files in my directory.
If you'd find it easier, here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Reece's IT Support</title>
<!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="../../js/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../js/jquery/jquery.cookie.js"></script>
<script>
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
</script>
<script type="text/javascript">
function Up()
{
window.location.hash="Down";
}
</script>
<style type="text/css">
<!--
body {
background-color: #0000CC;
}
body,td,th {
color: #FFFFFF;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
}
#anchor-tag{
color: #fff;
}
#anchor-tag:hover{
color: #fff;
}
#anchor-tag:active{
color:#fff;
}
-->
</style>
<style type="text/css">
ul.MenuBarVertical
{
margin: 0 auto ;
width: 8em;
}
a:link {
color: #FBFBFD;
}
a:hover {
color: #FFFF00;
}
a:visited {
color: #00FF00;
}
a:active {
color: #FFFF00;
}
.style19 {font-size: larger}
table{margin:0 auto;}
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
ul.MenuBarVertical
{
margin: 0 auto;
width: 8em;
}
.style22 {
font-size: xx-large
}
.style23 {font-family: Arial, Helvetica, sans-serif}
.style24 {
font-size: 75px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<style type="text/css">
@import url("csscolourtest.css" );
</style>
<SCRIPT LANGUAGE="JavaScript">
<noscript> your browser does not support JavaScript!</noscript>
</SCRIPT>
<style type="text/css">
@import url("csscolourtest.css" );
</style>
<SCRIPT LANGUAGE="JavaScript">
<noscript> your browser does not support JavaScript!</noscript>
</SCRIPT>
</head>
<body>
<!--Colour Changer-->
<form>
<input type="button"
value="White" style="Background: white;"
onClick="document.body.style.backgroundColor = '#FFFFFF';document.fgColor='#FF0000';">
<input type="button"
value="Green" style="Background: green;"
onClick="document.body.style.backgroundColor = '#008000';document.fgColor='#FFFF00';">
<input type="button"
value="Blue" style="Background: blue;"
onClick="document.body.style.backgroundColor = '#0000CC';document.fgColor='#FFFFFF';">
<input type="button"
value="Red" style="Background: red;"
onClick="document.body.style.backgroundColor = '#FF0000';document.fgColor='#FFFF00';">
</form>
<!--End Colour Changer-->
<ul id="nav">
<li><a href="#" rel="style1.css">White</a></li>
<li><a href="#" rel="style2.css">Red</a></li>
<li><a href="#" rel="style3.css">Green</a></li>
</ul>
<table width="718" height="681" border="0" cellpadding="0" cellspacing="0" bordercolor="#F0F0F0" bgcolor="transparent" name="Table1" id="Table1">
<tr>
<td height="74" colspan="2"><p align="center" class="style24">Reece's IT Support</p>
<p align="center" class="style19">This is NOT a real website, this is a college project.</p>
</td>
</tr>
<tr>
<td width="177" height="510" valign="top" ><ul class="MenuBarVertical style22 style23" bgcolor="transparent" id="MenuBar1">
<li><a href="../index.html">Home</a> </li>
<li><a href="../enterprise.html">Enterprise Support</a></li>
<li><a href="../smallcompany.html">Small Company Support</a> </li>
<li><a href="../homesupport.html">Home Support</a></li>
<li>
<div align="left"><a href="../faq.html">FAQ</a></div>
</li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contactus.html">Contact Us</a></li>
<li><a href="../feedback.html">Feedback</a></li>
</ul> </td>
<td width="541" valign="top"><div><!-- TemplateBeginEditable name="EditRegion3" --><!-- TemplateEndEditable --></div></td>
</tr>
<tr>
<td height="23" colspan="2"><div align="center"></div></td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<form>
<h1> </h1>
</form>
</body>
</html>
