Change a webpage's background!

[bruglione]

~RESOLVED~

Is it possible to have diffrent background images for a webpage, so that visitors can switch the background with a simple button?

I want to do this without creating multiple webpages, I mean I don't want the button to be a simple link to the same page with a diffrent background.

I hope you guys understand what I mean, it's kinda difficult to explain...

[Twey]

Certainly:

<select onchange="document.body.style.backgroundImage = 'url(' + this.options[this.selectedIndex].value + ')';">
  <option value="">None</option>
  <option value="images/blue_leaves.jpeg">Blue Leaves</option>
  <option value="images/op_art.png">Op Art</option>
</select>

[bruglione]

Alright I've got that part to work, its awesome, thanks a lot!

But now for my next question:

Is there an easy way to make the browser remember the last chosen background?

[Schmoopy]

You'll need cookies for that, which is a little trickier.

[bruglione]

You've got any Guide/Tutorial link for this?

[jscheuer1]

Untested (should work barring any typos). Put this in the head (cookie code from quirksmode.org):

<script type="text/javascript">
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(){
if (readCookie('backgroundCookie'))
document.write('<style type="text/css">body { background-image: ' + readCookie('backgroundCookie') + ';}<\/style>');
})();
</script>

And modify what Twey had:

<select onchange="var bg = 'url(' + this.options[this.selectedIndex].value + ')'; 
                  document.body.style.backgroundImage = bg;
                  createCookie('backgroundCookie', bg);">
  <option value="">None</option>
  <option value="images/blue_leaves.jpeg">Blue Leaves</option>
  <option value="images/op_art.png">Op Art</option>
</select>

[bruglione]

Alright I'll test this when I get home, thanks everyone!

[Snookerman]

........

[bruglione]

Life is not pain, here check out this shirt:http://www.life-is-not-pain-shirt.com/

Damn I clicked... But your still a lame idiot =D

[Twey]

I'd probably go with something a bit more robust/modular:

var Cookie = (function() {
    function Cookie(name, value, maxAge, path, secure) {
        this.name   = name;
        this.value  = value;
        this.maxAge = (!maxAge || maxAge instanceof Duration) ? maxAge : new Duration(maxAge);
        this.path   = path;
        this.secure = !!secure;
    }

    Cookie.prototype = {
        toString: function() {
            return [encodeURIComponent(this.name) + "=" + encodeURIComponent(this.value),
                    this.maxAge && "max-age=" + this.maxAge.toSeconds(),
                    this.path   && "path="    + this.path,
                    this.secure && "secure"].filter().join("; ");
        },

        write: function() {
            document.cookie = this.toString();

            return this;
        }
    };

    function fromString(s) {
        s = s.split(/;\s*/g).map(function(a) { return a.split(/=/); });

        var name = s[0][0],
            val  = s[0][1];

        s = Object.fromArray(s.slice(1));

        return new Cookie(name, val, s.maxAge, s.path, s.secure);
    }

    function pairWithName(o) {
        return [o.name, o];
    }

    function get(n) {
        return getAll()[n];
    }

    function getAll() {
        return Object.fromArray(document.cookie.split(/;\s*/g).map(fromString).map(pairWithName));
    }

    Cookie.fromString = fromString;
    Cookie.get        = get;
    Cookie.getAll     = getAll;

    return Cookie;
})();

Object.fromArray = function(a) {
    var r = {};

    for (var i = a.length; --i >= 0; )
        r[a[i][0]] = a[i][1];

    return r;
};

Function.id = function(a) { return a; };

Array.prototype.filter = function(f) {
    f = f || Function.id;

    for (var i = 0, r = []; i < this.length; ++i)
        if (f(this[i]))
            r.push(this[i]);

    return r;
};

Array.prototype.map = function(f) {
    for (var i = this.length, r = []; --i >= 0; )
        r[i] = f(this[i], i);

    return r;
};

var Duration = (function() {
    function Duration(years, days, hours, minutes, seconds) {
        if (typeof arguments[0] === "object") {
            var obj = arguments[0];

            this.years   = obj.years   || 0;
            this.days    = obj.days    || 0;
            this.hours   = obj.hours   || 0;
            this.minutes = obj.minutes || 0;
            this.seconds = obj.seconds || 0;
        } else {
            this.years   = years;
            this.days    = days;
            this.hours   = hours;
            this.minutes = minutes;
            this.seconds = seconds;
        }
    }

    Duration.prototype = {
        toSeconds: function() {
            return   this.seconds
                + this.minutes * 60
                + this.hours   * 60 * 60
                + this.days    * 60 * 60 * 24
                + this.years   * 60 * 60 * 24 * 365;
        }
    };

    return Duration;
})();

var Background = (function() {
  function setImage(path) {
    document.body.style.backgroundImage = 'url(' + path + ')';
  }

  function setPersistentImage(path) {
    setImage((new Cookie("bgimg", path)).write().value);
  }

  function restoreImage() {
    setImage(Cookie.get("bgimg").value);
  }

  return {
    setImage:           setImage,
    setPersistentImage: setPersistentImage,
    restoreImage:       restoreImage
  };
})();

onload = Background.restoreImage;

And then:

<select onchange="Background.setPersistentImage(this.options[this.selectedIndex].value);">
  <option value="">None</option>
  <option value="images/blue_leaves.jpeg">Blue Leaves</option>
  <option value="images/op_art.png">Op Art</option>
</select>

Note that MDC now marks the expires cookie directive as obsolete: presumably max-age should always be used instead.