Change a webpage's background!

~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...

Certainly:

Code:

---

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

---

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?

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

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

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

Code:

---

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

Code:

---

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

---

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

........

Quote:

---

Originally Posted by Snookerman

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

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

Code:

---

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:

Code:

---

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

@Snookerman & bruglione

Watch it please. Both of your last posts in this thread were off topic. I didn't even issue either of you a warning, let alone an infraction, but please keep those kinds of discussions to the lounge area.

@Twey

I noticed you checking out this thread and was wondering when and if you would comment with your own version. I haven't gone over it or tested it (though I will have a look soon), but then I didn't even test my version. I was fully aware that the code I wrote wasn't anywhere as tight as it could be, but I figured it would work out well (if it worked at all) for the purpose at hand. Some of these things I spend hours on. Others, like this one, took only a few minutes.

Sorry jscheuer, just an innocent joke, won't happen again.

Well, that's obviously overkill in this particular case, but it's made up of several handy reusable parts that may come in useful in the future.

Quote:

---

Originally Posted by Twey

Well, that's obviously overkill in this particular case, but it's made up of several handy reusable parts that may come in useful in the future.

---

Yes, quite a clinic. I know you balked at this the last time I brought it up, but I still think, now even more so, that you should put out an official library of routines. The reason I'm even more inclined to urge you to do this is that in the interim I have worked with a number of the existing libraries a lot more and see how inadequate and overreaching they can be (this is not to say that they are no good, just nowhere near as good as they could be). I'd even go so far as to offer my services as a co-author of sorts, but more in the vein of helping out with how things might play out in IE, and/or Opera, particularly on the PC, and offering general suggestions. As far as sophistication in coding and a knowledge of best practices goes you are probably more up on that than I.

Both thanks :)

Hey Twey, I was copying your code to have an even closer look at it and noticed:

Quote:

---

Code:

---

onload = Background.restoreImage;

---

---

Two things about that I don't like, but feel free to assuage me:

• For a number of reasons, isn't it best practice to use window.onload, or better yet addEventListener/attachEvent?
  
• Waiting for the load event to set background will (depending upon the default bg, load time, etc.) quite possibly make the page look bad while loading. And if this is to be used site wide, would result in some bumpy visual transitions between pages.

To the former: no, that is entirely redundant (quite literally: you can refer to it as window.window.window.window.window.onload if you want). We're in global scope here, so there is nothing that could possibly be shadowing onload in a higher scope: we can only be referring to the global onload (as you probably know, all globals are properties of the global [window] object, and vice versa). Certainly there's no harm in using addEventListener/attachEvent, and I've a chunk of code for that, too:

Code:

---

var Event = (function() {

  function addEventW3C(el, ev, f) {
    return el.addEventListener(ev, f, false);
  }

  function removeEventW3C(el, ev, f) {
    el.removeEventListener(ev, f, false);
  }

  function addEventIE(el, ev, f) {
    ((el._evts = el._evts || [])[el._evts.length]
        = function(e) { return f.call(el, e); })._w = f;

    return el.attachEvent("on" + ev,
        el._evts[el._evts.length - 1]);
  }

  function removeEventIE(el, ev, f) {
    for (var evts = el._evts || [], i = evts.length; i--; )
      if (evts[i]._w === f)
        el.detachEvent("on" + ev, evts.splice(i, 1)[0]);
  }

  function addEventLegacyHandler(e) {
    var evts = this._evts[e.type];
    for (var i = 0; i < evts.length; ++i)
      if (!evts[i].call(this, e || event))
        return false;
  }

  function addEventLegacy(el, ev, f) {
    if (!el._evts)
      el._evts = {};

    if (!el._evts[ev])
      el._evts[ev] = [];

    el._evts[ev].push(f);

    return true;
  }

  function removeEventLegacy(el, ev, f) {
    for (var evts = el._evts[ev] || [], i = evts.length; i--; )
      if (evts[i] === f)
        evts.splice(i, 1);
  }

  return window.addEventListener
      ? {add: addEventW3C, remove: removeEventW3C}
      : window.attachEvent
          ? {add: addEventIE, remove: removeEventIE}
          : {add: addEventLegacy, remove: removeEventLegacy};
})();

---

Code:

---

Event.add(window, "load", Background.restoreImage);

---

I usually don't go the whole nine yards with this one, since, as you say, it's really preferable to insert a <script> element just inside the <body>.

As it happens, we can actually remove the necessity for this line altogether, at least in standards-compliant browsers, by simply changing:

Code:

---

    document.body.style.backgroundImage = 'url(' + path + ')';

---

to:

Code:

---

    document.documentElement.style.backgroundImage = 'url(' + path + ')';

---

However, I'm leery of doing so since it seems like the sort of thing IE might not support under some bizarre combination of circumstances. Perhaps you could give this a test?

Well, it's a strict warning in FF's console to skip the parent object, but I get your point. That sort of thing is important in boolean(ish) testing of globals that aren't universally supported.

Quote:

---

Originally Posted by Twey

Code:

---

    document.documentElement.style.backgroundImage = 'url(' + path + ')';

---

However, I'm leery of doing so since it seems like the sort of thing IE might not support under some bizarre combination of circumstances. Perhaps you could give this a test?

---

Nice idea. It's my impression that would add the style to the opening html tag. That's fine of course, it would engender some practical considerations as far as other styles for the page go. For instance, if the body had a different background (anything other than transparent), it would obscure it. Without testing, I would think this would be fine in IE. There might be a problem in quirksmode in IE, so a valid URL DOCTYPE of 4.01 Transitional could be a minimum requirement. However, testing filters against the document.documentElement works in quirks in IE. What tends to get problematic with document.documentElement vs. document.body in IE in quirks are dimensions (clientHeight, scrollTop - those sorts of things). If the documentElement's height were 0 (which is implied, though not necessarily the case in quirksmode in IE), then the background image, though applied, would not show up.

Just tested it, it's fine on a blank page with or without DOCTYPE in IE 6 and 7.

What happens in IE 7 - according to the developer toolbar for that browser is that in quirks, the style is applied to the body and the html elements. In compliance mode, only to the html element.

Sounds like that's the way to go, then. Of course we should always assume standards-compliance anyway, and users should assume that code will break on non-compliant pages. Maybe a caveat is in order about defining a background on the body.

As for the functions, I actually have rather a lot of them sitting about in various text files on my hard drive. Unfortunately, I'm having something of a technical crisis at the moment, with the key to my server residing on a drive in a broken machine — I need to shell out some £200 for the parts necessary to fix it so that I might upload my site and store things on it.