Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: Change a webpage's background!

  1. #1
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Thumbs up 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...
    Last edited by bruglione; 11-25-2008 at 07:21 AM.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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>
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. The Following User Says Thank You to Twey For This Useful Post:

    bruglione (11-24-2008)

  4. #3
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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?
    Last edited by bruglione; 11-24-2008 at 12:11 PM.

  5. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

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

  6. #5
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    bruglione (11-24-2008)

  9. #7
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

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

  10. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    ........
    Last edited by Snookerman; 11-25-2008 at 05:15 PM. Reason: removed joke
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  11. #9
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by Snookerman View Post
    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

  12. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Last edited by Twey; 11-25-2008 at 10:16 AM. Reason: Fix tabs.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •