[RESOLVED] Cookie enabled bg image??

This site is best viewed in a modern browser with JavaScript enabled.

wedelias

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:

<!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>

MrNobody

To set the date to the next month, simply do this:

var expDate = new Date();
expDate.setMonth(expDate.getMonth()+1);

Otherwise, what does the content of your cookie function look like? I prefer these cookie functions:

function getCookie(name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return null;
}
function getCookieVal(offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
}
function setCookie(name, value) {
  var argv = setCookie.arguments;
  var argc = setCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
     ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
     ((path == null) ? "" : ("; path=" + path)) +  

     ((domain == null) ? "" : ("; domain=" + domain)) +    

     ((secure == true) ? "; secure" : "");
}
function delCookie(name) {
  exp = new Date();
  exp.setTime(exp.getTime() - (24*60*60*1000));
  var cval = getCookie(name);
  cval = (cval == null) ? "" : cval;
  document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

wedelias

This is what I have. I'm probably not even remotely close...

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookieBlue("selectedBgImage", "../colors/blue.jpg", nextMonth);

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookieBlack("selectedBgImage", "../colors/black.jpg", nextMonth);

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookieRed("selectedBgImage", "../colors/red.jpg", nextMonth);

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookieMagenta("selectedBgImage", "../colors/magenta.jpg", nextMonth);

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookieGreen("selectedBgImage", "../colors/green.jpg", nextMonth);

   var today = new Date();
   var nextMonth = new Date(today.getYear(), today.getMonth()+1, today.getDate());
   setCookiePurple("selectedBgImage", "../colors/purple.jpg", nextMonth);

var szName = getCookie("selectedBgImage");

How would I put the javascript you included into the site?

MrNobody

Do you have a function defined for these? setCookieBlue()

wedelias

What you see is what I have. So, I'm assuming I am missing those functions. Will I have to have a separate function for each cookie?

MrNobody

You only need a separate cookie for different purposes -- so the answer is no.

function changeBGImage(whichImage)
{
	if (document.body)
	{
		document.body.background = backImage[whichImage];
		var expDate = new Date();
		expDate.setMonth(expDate.getMonth()+1);
		setCookie("selectedBgImage", backImage[whichImage], expDate);
	}
	return true;
}

wedelias

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>

MrNobody

wedelias;975265 wrote:
Where do I put that? Do I replace something?

I used your function name -- so that should clue you in to replace your function with that function. I also wrote it to use my cookie functions (which I posted earlier).

wedelias

Ok i think I fixed those issues, however it still isn't working. It sets the cookie when viewing locally, but not on the server. Also, I don't think the getCookie function works here.

current files:
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 setCookie(name, value) {
  var argv = setCookie.arguments;
  var argc = setCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
     ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
     ((path == null) ? "" : ("; path=" + path)) +  

     ((domain == null) ? "" : ("; domain=" + domain)) +    

     ((secure == true) ? "; secure" : "");
}

function getCookie(name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return null;
}
function getCookieVal(offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
}

function delCookie(name) {
  exp = new Date();
  exp.setTime(exp.getTime() - (24*60*60*1000));
  var cval = getCookie(name);
  cval = (cval == null) ? "" : cval;
  document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
//function from quirksmode. - END

function changeBGImage(whichImage)
{
	delCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
	if (document.body)
	{
		document.body.background = backImage[whichImage];
		var expDate = new Date();
		expDate.setMonth(expDate.getMonth()+1);
		setCookie("selectedBgImage", backImage[whichImage], expDate);
	}
	return true;
}

(function(){
	var backImage = getCookie('selectedBgImage');
	if(backImage !== "") {
		changeBGImage(whichImage);
	}

})();

  var expDate = new Date();
  	expDate.setMonth(expDate.getMonth()+1);

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.html"><div id="campaign"></div></a>
	<a href="celebrity.html"><div id="celebrity"></div></a>
	<a href="about.html"><div id="about"></div></a>
	<a href="store.html"><div id="store"></div></a>
	<a href="blog.html"><div id="blog"></div></a>
	<a href="media.html"><div id="media"></div></a>
	<a href="international.html"><div id="international"></div></a>
	<a href="wholesale.html"><div id="wholesale"></div></a>
	<a href="press.html"><div id="press"></div></a>
	<a href="contact.html"><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="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></div>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>

MrNobody

Don't worry about the server. Replace all of this:

function changeBGImage(whichImage)
{
	delCookie('selectedBgImage'); //if a cookie exists remove it, not necessary but I prefer this.
	if (document.body)
	{
		document.body.background = backImage[whichImage];
		var expDate = new Date();
		expDate.setMonth(expDate.getMonth()+1);
		setCookie("selectedBgImage", backImage[whichImage], expDate);
	}
	return true;
}

(function(){
	var backImage = getCookie('selectedBgImage');
	if(backImage !== "") {
		changeBGImage(whichImage);
	}

})();

  var expDate = new Date();
  	expDate.setMonth(expDate.getMonth()+1);

with this:

var selectedBgImage, BgImageCookie = "selectedBgImage";
function changeBGImage(selectedBgImage)
{
	delCookie(BgImageCookie); //if a cookie exists remove it, not necessary but I prefer this.
	if (document.body)
	{
		document.body.background = backImage[selectedBgImage];
		var expDate = new Date();
		expDate.setMonth(expDate.getMonth()+1);
		setCookie(BgImageCookie, selectedBgImage, expDate);
	}
	return true;
}
// following should be single equal-sign -- not double...
if(selectedBgImage [COLOR="Red"]=[/COLOR] getCookie(BgImageCookie))
{
	changeBGImage(selectedBgImage);
}

wedelias

Now it doesn't show a bg image at all until you select one. And still doesn't set the cookie.

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 setCookie(name, value) {
  var argv = setCookie.arguments;
  var argc = setCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape(value.replace(/ /g, "+")) + 
     ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 
     ((path == null) ? "" : ("; path=" + path)) +  

     ((domain == null) ? "" : ("; domain=" + domain)) +    

     ((secure == true) ? "; secure" : "");
}

function getCookie(name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
      return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return null;
}
function getCookieVal(offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr)).replace(/\+/g, " ");
}

function delCookie(name) {
  exp = new Date();
  exp.setTime(exp.getTime() - (24*60*60*1000));
  var cval = getCookie(name);
  cval = (cval == null) ? "" : cval;
  document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
//function from quirksmode. - END

var selectedBgImage, BgImageCookie = "selectedBgImage";
function changeBGImage(selectedBgImage)
{
	delCookie(BgImageCookie); //if a cookie exists remove it, not necessary but I prefer this.
	if (document.body)
	{
		document.body.background = backImage[selectedBgImage];
		var expDate = new Date();
		expDate.setMonth(expDate.getMonth()+1);
		setCookie(BgImageCookie, selectedBgImage, expDate);
	}
	return true;
}
if(selectedBgImage = getCookie(BgImageCookie))
{
	changeBGImage(selectedBgImage);
}

<!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 Campaign</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.html"><div id="campaign"></div></a>
	<a href="celebrity.html"><div id="celebrity"></div></a>
	<a href="about.html"><div id="about"></div></a>
	<a href="store.html"><div id="store"></div></a>
	<a href="blog.html"><div id="blog"></div></a>
	<a href="media.html"><div id="media"></div></a>
	<a href="international.html"><div id="international"></div></a>
	<a href="wholesale.html"><div id="wholesale"></div></a>
	<a href="press.html"><div id="press"></div></a>
	<a href="contact.html"><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="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></div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>

MrNobody

Run it through a script debugger and figure it out. Or, since you aren't telling me anything helpful, provide a live link to the page so I can stop guessing what your problems are.

wedelias

Oh, sorry, I thought you were seeing the website. The link is at the top of the page.

http://www.nvmber9.com/new%20site

MrNobody

You weren't checking for error messages in your browser. Insert the following line into the beginning of your setCookie function:

  value = value.toString();

wedelias

I don't know what that did. A few changes ago the bg image was black (and still is in the body tag) but now no bg image shows up until you select one. Should I be adding some sort of onload function to getCookie?

MrNobody

The color on your site is working fine, now, for me. Just change all these:

<a href="javascript:changeBGImage(1)"><img src="colors/black.png" title="select a background color" class="footer"/></a>

to this:

<img src="colors/black.png" title="select a background color" class="footer"
 onclick="return changeBGImage(1)" style="cursor:pointer;" />

wedelias

Thank you so much!! It works! Just a few things. Do you know how to fix it for safari? it looks fine in Firefox and Opera.. not sure about IE.. scared to check. :-/ And by chance, do you know of a way to make the images fade in when selected?

Thanks again!!

MrNobody

I tried it in both FF3 and IE7 and it seems to look the same in both. Don't know anything about Safari. Don't mess with fades, either. Sorry.

wedelias

Ok, that's fine with me!. I'll look around for that fix. Yeah and I don't want to have to go through all of this again just for a fade. Thank you so much for your time and knowledge!