how to make the background image permanent if user select a different

Question

i have the below JS and i want to make cookies or whatever so if user change the image so it will keep the same background for that user for whole website. please help me in solving this. but when i change the image it changes the image but when i go to another page it goes back to the default

<script language="JavaScript">
    var w=screen.width
    var h=screen.height
if(w==1280) {
var backImage = new Array(); // don't change this
backImage[0] = "images/patterns/background-1280x-yellow.png";
backImage[1] = "images/patterns/background-1280x-mellow.png";
backImage[2] = "images/patterns/background-1280x-sellow.png";

function changeBGImage(whichImage){
if (document.body){
document.body.style.backgroundImage = "url("+backImage[whichImage]+")";
}}
}
if(w==1440) {
var backImage = new Array(); // don't change this
backImage[0] = "images/patterns/background-1440x-yellow.png";
backImage[1] = "images/patterns/background-1440x-mellow.png";
backImage[2] = "images/patterns/background-1440x-sellow.png";

function changeBGImage(whichImage){
if (document.body){
document.body.style.backgroundImage = "url("+backImage[whichImage]+")";
}}
}
</script>

<?php
echo "<a href='javascript:changeBGImage(0)'>Yellow - </a>";
echo "<a href='javascript:changeBGImage(1)'>Mellow - </a>";
echo "<a href='javascript:changeBGImage(2)'>Sellow</a>";
//echo "<a href='javascript:changeBGImage(3)'>4</a>";
?>

Answer 1

It sounds like you already know how to do this, use cookies. Here is a cookie object I use:

var cookie = {
    set: function(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=/";
    },
    get: function(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;
    },
    erase: function(name) {
        cookie.set(name,"",-1);
    }
}

This allows simple calls like cookie.set('cookie_name', cookie_value, days); and cookie.get('cookie_name');.

So, when a user selects an image, call cookie.set('bgImage', image_url, 365);.

function changeBGImage(whichImage){
  if (document.body){
   document.body.style.backgroundImage = "url("+backImage[whichImage]+")";
   cookie.set('bgImage', whichImage, 365);
  }}
}

When your page is loading, check if the cookie exists (if(cookie.get('bgImage'))) and change the background to the value stored in the cookie. You could just put this line at the bottom of your script block and it should work fine:

// if they have a cookie set with which image they prefer, call changeBGImage with that value.
if(cookie.get('bgImage')){
   changeBGImage(cookie.get('bgImage'));
}

Answer 2

Look into JavaScript cookies. Here's a good intro from w3schools.

Basically, what you want to do is create a cookie within your changeBGImage function that stores the number for the selected background,

document.cookie = "bg="+whichImage;

Then, at the top of the page, do a check to see if a bg cookie exists and if it does, get its value and set the background.

The link above should provide all the information you need.