PDA

View Full Version : User selected background image for entire site



wedelias
01-29-2009, 02:57 AM
I have looked for a while now and haven't come across a script that lets the user change the background image for the entire site. I found some that changes it for the page and implements a cookie so the user will always have that preference when they come to the page. However, I believe that only works for a single page. My limited knowledge in this field will probably show here, but is there a way to make the selected image become the 'default' background image in the css file, so when the visiter navigates to another page, that same image appears?

Nile
01-29-2009, 03:00 AM
We'd have to see your code to help you...

Please post a link to the page on your site that contains the problematic script so we can check it out.
Please include your code so that we can take a look at it, we can't do much without it.
Please post a link to the site you found this script at.

wedelias
01-29-2009, 03:10 AM
I don't have a page built yet. I want to know if it is possible before i design the site.

This is the website that I found the previous script at:

http://hell.org.ua/Docs/oreilly/webprog/DHTML_javascript/0596004672_jvdhtmlckbk-chp-12-sect-7.html

codeexploiter
01-29-2009, 03:45 AM
I found some that changes it for the page and implements a cookie so the user will always have that preference when they come to the page.

The same thing can be applied in two different aspects:

1. A cookie based method

2. A server-side based method


1. A cookie based method

The idea here is like the way you've mentioned above. The user selects a background image for them and do something to save that setting like clicking a button or link. At that moment you place a cookie in the user's machine and change the current page's background image to the one selected by the user. The cookie value will be the image name (with path, if required) and also the cookie will have a name for eg: selectedBgImage. Now imagine that the user navigates to another page, here you found the issue. The page to which the user navigate to will have a piece of JavaScript code at the 'onload' event of 'window' object, which checks whether there is any cookie named 'selectedBgImage' in user's machine. If the cookie exists then change the background image of the current page with its value if there is no cookie or no value then you can proceed further with the normal page setting.

This is a completely client-side based solution and has shortcomings like the user can remove the cookie at any time they want. Once the cookie removed it would be difficult to maintain the idea that I've described earlier.

2. A server-side based method

Though I've mentioned it as a server-side based method it is a mix of client-side and server-side parts. I don't know whether the user's have any sign-in process to accomplish the selection of background image or not in your case.

(a) Without Sign-in

In this case what we do is we'll start it like the first plan but at the time of setting a cookie we can make an ajax call and set a session variable to indicate that the user has set a background image. To be exact the cookie name and the image name. Next time the user visits any page we check whether there is any mentioned cookie available with a value, if it is there you can skip. In the othercase we simply place a cookie from the server-side code and the cookie based processing will be handled by the JavaScript part as I've mentioned in plan 1.

If the user ends the session by closing the browser, clear the cache and return to the page will not provide the background image that (s)he selected earlier as they've removed the cookie from the browser. If the cookie is still there the last select background image will be displayed.

Assume that your user does not accept cookies then what happens. In this case we'll make an approach only based on Session variabt instead of storing the cookie name and the background image value. We maintain only the background image value and pass this value to the client-side and the JS will make the required updation or make the required adjustments from the server-side code itself. Make sure that you employ this part only if the user does not allow you to set a cookie.

(b) With a Sign-in

Everything should be exactly like the way mentioned in case a and additionally we store the selected background image in the database associated with their user name. Rest of the things are similar to the above explained items.

These are just plans that can be converted to working solutions. But it would be better if you can provide more details about your exact situation.

Hope this helps.

wedelias
01-29-2009, 06:02 AM
Both of those sound like good solutions. I am not at all a coder so I have no idea which is better for my situation. Here's what I am working with.

It is a fashion site that is focusing this design over their color story for their new collection. I have made 6 gradients in those colors to be used as the background, repeated-x. I want those colors in icons on the page so the user can change the site color to their liking. The way I had envisioned it, I want the user-selected icon to change the background color of the current page and any page that the user navigates to thereafter, until they change it to another color. I think the cookie solution would be fine, I don't think it matters if the user deletes their cookies. They will just have to click it again, unless I'm missing something.

wedelias
02-02-2009, 10:12 PM
If anybody has a solution or a script for this, it would be much appreciated!

Here is what I have so far, but the background still changes back to the default when browsing to another page.

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



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

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

codeexploiter
02-03-2009, 04:37 AM
Here is a demonstration of the item that I've mentioned earlier, which works through client-side cookies. I hope from this you'll get the idea of its working without much trouble.

About the demo files. I have attached them as a ZIP file, which contains two HTML files (1.htm and 2.htm) and a JavaScript file (code.js).

1. Unzip all the files and keep them together.
2. Open 1.htm in your browser.
3. Select a background color placed there through the respective link (red and gray)
4. Once you click it a cookie will be set with the selected color.
5. Now click the 'Go to Second page' link.
6. If you have set a background color like the manner above mentioned you should be able to view a background color you've selected in second page.
7. Now go back to your previous page through the browser back button and you should be able to view the selected background color there also.

All the JavaScript code required for this purpose is in code.js and please note that it is better to load the JavaScript file as the part of body in your case.

Please let me know if you need any more assistance.

Hope this helps.

wedelias
02-03-2009, 05:35 AM
Thanks for the help, it looks like it should work. mine doesn't right now. Is that because I am working with images? If so, how would I modify the script?

If I followed your example, this is what I have:
http://www.nvmber9.com/new%20site

codeexploiter
02-03-2009, 08:07 AM
The following line should be changed in your code


if (document.body){
document.body.background = backImage[whichImage];
}

To


if (document.body){
document.body.style.backgroundImage = "url('" + backImage[whichImage] + "')";
}

Hope this helps.

wedelias
02-03-2009, 08:26 AM
Wait, now I'm confused. Do I keep the old script in there or use the new one? I would have thought I would have to change something in the code.js file in the demo site. ie. selectedBgColor to selected BgImage, etc, or something like that.

codeexploiter
02-03-2009, 08:36 AM
Basically in your script you have used a background image and in my script I have used background color.

As far as background color setting is concerned it is straight forward.

But background image setting has a slightly different syntax.

If you want to use background color then you can go with my script.

If you want to use background image then you can go with your script but with the changes mentioned by me.

wedelias
02-03-2009, 09:43 AM
Tried a whole bunch of things and still haven't got it.

Here's the code.js file:


//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', "url('" + backImage[whichImage] + "')", 7);
changeBGImage(whichImage);
}

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

})();


HTML file:



<!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">
<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.style.backgroundImage = "url('" + backImage[whichImage] + "')";
}
}
</script>
<div id="sideline"></div>
<div id="navigation">
<a href="index.html"><div id="logo"></div></a>
<a href="collection/index.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>




What am I missing?

codeexploiter
02-03-2009, 11:27 AM
1. I have modified the approach a bit different now. Note that the code used in code.js is the one you've furnished in your post. Now onwards use the new code.js

2. I have modified the HTML page source a bit, removed the script from it.

3. The idea here is you need to include code.js in every html file that needs to adjust the background image of its body.

4. Make sure that the images designated as background images exists, the ones mentioned in the array.

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/index.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>


Hope this helps

wedelias
02-03-2009, 08:26 PM
hmm.. well I tried that but it still didn't work. 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 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 Campaign</title>
<link href="common.css" rel="stylesheet" type="text/css" />
</head>

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


Any other suggestions?

wedelias
02-04-2009, 02:19 AM
Got it to work:

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) {
value = value.toString();
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);
}


index.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 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">
<h2>Home</h2>
<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">
<img src="colors/black.png" title="must enable cookiesr" class="footer" onclick="return changeBGImage(1)" style="cursor:pointer;" />
<img src="colors/blue.png" title="must enable cookies" class="footer" onclick="return changeBGImage(0)" style="cursor:pointer;" />
<img src="colors/red.png" title="must enable cookies" class="footer" onclick="return changeBGImage(2)" style="cursor:pointer;" />
<img src="colors/magenta.png" title="must enable cookies" class="footer" onclick="return changeBGImage(3)" style="cursor:pointer;" />
<img src="colors/purple.png" title="must enable cookies" class="footer" onclick="return changeBGImage(4)" style="cursor:pointer;" />
<img src="colors/green.png" title="must enable cookies" class="footer" onclick="return changeBGImage(5)" style="cursor:pointer;" />
<span class="selectbg">CHOOSE YOUR BACKGROUND COLOR</span></div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>


Working in Opera, FF3, and IE7. Still trying to get Safari to work right. Any ideas?