Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    112
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unobtrusive bg randomize

    Hi,
    I need help randomizing the background image. I have tried but nothing seems to work. Here is what I have so far and it works, but this is just a single image.
    PS This has to stay unobtrusive!

    <script language="javascript">
    function setStyles(el, css) {
    var l = el.length;
    if (typeof l == 'undefined') {el = [el]; l = 1;}
    for (var i=0; i<l; i++) {
    for (var s in css) el[i].style[s] = css[s];
    }
    }

    window.onload = function() {setStyles(document.body, {background:'url(images/studio.gif) repeat-x top'});
    }
    </script>

    Thx everyone,
    CB

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any reason not to do it with php? http://bonrouge.com/br.php?page=faq#randombg (having said that, there's a javascript example in there too).
    Last edited by BonRouge; 01-07-2007 at 04:17 PM.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    112
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that. I already know the php way. It's just the person I'm doing this for actually doesn't have php on their server...lol

    I've nearly got the javascript thing sorted. All I need to know is how can I get the javascript taken out of the body element?

    I can use set Attribute because of IE so I had to use this and it looks messy even though it works. Is this still unobtrusive js even though it's contained within the body tag?

    <body <script language="JavaScript">

    <!-- Begin
    document.open();
    document.write("<BODY BACKGROUND='"+image+"' TEXT='"+text_color+"'>");
    document.write("<CENTER></CENTER>");
    // End -->
    </SCRIPT>>


    Best,
    CB

  • #4
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about this? http://bonrouge.com/demos/js_rand_bg.htm

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>js_rand_bg</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    background-color:white;
    }
    </style>
    <script type="text/javascript">
    function randBg() {
    var bg= new Array(3);
    bg[0]='wine.jpg';
    bg[1]='whisky.jpg';
    bg[2]='beer.jpg';
    var ran_unrounded=Math.random()*2;
    var rand=Math.round(ran_unrounded);
    var theBg= 'url(images/'+bg[rand]+')';
    document.body.style.backgroundImage=theBg;
    }
    window.onload=randBg;
    </script>
    </head>
    <body>
    
    </body>
    </html>


  •  

    Posting Permissions

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