Where do I put that? Do I replace something? Sorry, still learning..
I did notice something though. It places the cookie when I view the site from my files, but when I upload to the server, it doesn't. And I can't get the readCookie function to work.
this is what I have now:
code.js:
var backImage ="colors/blue.jpg,colors/black.jpg,colors/red.jpg,colors/magenta.jpg,colors/purple.jpg,colors/green.jpg".split(',');
//Using the following functions are from quirksmode. - START
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 var 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;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
//function from quirksmode. - END
function selectBg(whichImage) {
eraseCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
createCookie('selectedBgImage', backImage[parseInt(whichImage)], 7);
changeBGImage(whichImage);
}
function changeBGImage(whichImage){
if (document.body){
document.body.style.backgroundImage = "url('" + backImage[whichImage] + "')";
}
}
(function(){
var backImage = readCookie('selectedBgImage');
if(backImage !== "") {
changeBGImage(whichImage);
}
})();
html:
<!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" />
</head>
<body background="colors/black.jpg" bgproperties="repeat-x">
<div id="container">
<div id="sideline"></div>
<div id="navigation">
<a href="index.html"><div id="logo"></div></a>
<a href="collection.html"><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">
<div id="contenttop"></div>
<div id="contentmiddle">
<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>
<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>
<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>
<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>
</div>
<div id="contentbottom"></div>
</div>
</div>
<div id="footer">
<a href="" onclick="selectBg('1');return false;"><img src="colors/black.png" title="MUST ENABLE COOKIESr" class="footer"/></a>
<a href="" onclick="selectBg('0');return false;"><img src="colors/blue.png" title="MUST ENABLE COOKIES" class="footer"/></a>
<a href="" onclick="selectBg('2');return false;"><img src="colors/red.png" title="MUST ENABLE COOKIES" class="footer"/></a>
<a href="" onclick="selectBg('3');return false;"><img src="colors/magenta.png" title="MUST ENABLE COOKIES" class="footer"/></a>
<a href="" onclick="selectBg('4');return false;"><img src="colors/purple.png" title="MUST ENABLE COOKIES" class="footer"/></a>
<a href="" onclick="selectBg('5');return false;"><img src="colors/green.png" title="MUST ENABLE COOKIES" class="footer"/></a>
<span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span></div>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>