I am working on a site that has a few user-selected background images. I am able to get them to change when the image is clicked, but when browsing to a different page on the site, the background image goes back to the default image. I am not an expert in javascript at all, so I might be totally off on what I'm trying to do. I have tried a few different ways to put a cookie on the users computer telling it that the selected image is the user's preference for the bg image. Then when they click on a different link, an onload function getting the cookie just placed on the computer will load the image they selected on the previous page.

link to the site: http://www.nvmber9.com/new%20site
cookie javascript: http://www.nvmber9.com/new%20site/js/cookies.js
page code:
HTML Code:
<!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" />
<title>NVM|9</title>
<link href="common.css" rel="stylesheet" type="text/css" />
<script src="../js/cookies.js" type="text/javascript"></script>
</head>

<body background="colors/black.jpg" bgproperties="repeat-x" onload="getCookie">
<div id="container">
<script language="JavaScript">
// Copyright 2001 by www.CodeBelly.com
// Please do *not* remove this notice.
var backImage = new Array();
backImage[0] = "colors/blue.jpg";
backImage[1] = "colors/black.jpg";
backImage[2] = "colors/red.jpg";
backImage[3] = "colors/magenta.jpg";
backImage[4] = "colors/purple.jpg";
backImage[5] = "colors/green.jpg";
function changeBGImage(whichImage){
	if (document.body){
		document.body.background = backImage[whichImage];
		}
	}
</script>
<div id="sideline"></div>
<div id="navigation">
	<a href=""><div id="logo"></div></a>
	<a href="collection"><div id="collection"></div></a>
	<a href="campaign"><div id="campaign"></div></a>
	<a href="celebrity"><div id="celebrity"></div></a>
	<a href="about"><div id="about"></div></a>
	<a href="store"><div id="store"></div></a>
	<a href="blog"><div id="blog"></div></a>
	<a href="media"><div id="media"></div></a>
	<a href="international"><div id="international"></div></a>
	<a href="wholesale"><div id="wholesale"></div></a>
	<a href="press"><div id="press"></div></a>
	<a href="contact"><div id="contact"></div></a>
</div>
<div id="content">
	<table width="826" height="auto" cellpadding="0" cellspacing="0">
    	<tr>
			<td height="50" background="images/content-top.png">		  </td>
        </tr>
        <tr>
		  <td height="auto" background="images/content-bg.png" class="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
          </td>
        </tr>
        <tr>
   		  <td height="50" background="images/content-bottom.png">		  </td>
        </tr>
	</table>
</div>
</div>
<div id="footer">
<a href="javascript:changeBGImage(1)"><img src="colors/black.png" title="select a background color" class="footer"/></a>
<a href="javascript:changeBGImage(0)"><img src="colors/blue.png" title="select a background color" class="footer"/></a>
<a href="javascript:changeBGImage(2)"><img src="colors/red.png" title="select a background color" class="footer"/></a>
<a href="javascript:changeBGImage(3)"><img src="colors/magenta.png" title="select a background color" class="footer"/></a>
<a href="javascript:changeBGImage(4)"><img src="colors/purple.png" title="select a background color" class="footer"/></a>
<a href="javascript:changeBGImage(5)"><img src="colors/green.png" title="select a background color" class="footer"/></a>
<span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span> <span class="cookie">(MUST ENABLE COOKIES)</span></div>
</body>
</html>