Random Image Sets

Discussion in 'Web Design and Development' started by MegaMan1311, Feb 5, 2008.

  1. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #1
    Hello.
    The site I am building has a banner. It will be randomly chosen from about 10 different banners on page load. A background image for the page will be chosen depending on the banner loaded.

    EXAMPLE:
    A person visits my site. The page has a randomly loaded blue banner and thus a blue, checkered background. The visitor goes to another page on the site. That page has a red banner randomly loaded, and thus a red, striped background.

    I need a script to do that. It needs to be either Javascript or PHP. Does that make sense?

    Thanks in advance.
    MegaMan1311
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    This would my solution. PHP would be better simply because it won't depend on the user's browser.

    Make some CSS styles for each combination using some class name. Then you'll use some PHP similar to the following.

    PHP:
    $classes = array('class1'etc);
    srand(time());
    $random rand(0count($classes)-1);
    Then you can write out something like,
    PHP:
    <body <?php print 'class="'$classes[$random] .'"'?>>
     
  3. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    Hmm... the banner was going to be an image and not a background-image... I suppose I could work around that, but you wouldn't happen to know of another way to do it that allows the banner to be an image and the background to be a background?

    Also, with the code you gave me it doesn't seem like it would work because the banner (even if it was a background image) will be in a div separate from the body.
     
  4. modesty macrumors member

    Joined:
    Feb 3, 2008
    #4
    just use an array of strings with the image src in them? i gues you want someone to code it for you. l2google
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Not quite,
    HTML:
    body.class1 div#someID {
     background: whatever;
    }
    ...
    <body class="class1">
    ...
    <div id="someID">
    ....
    Like the other poster said. You can use another array to keep track of images and use the same random number when you print out the image tag or whatever.
     
  6. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #6
    Thank you for your help. I have just one more question.
    Lets say I have a couple of arrays like this:
    PHP:
    $imageset1 = array('banner1.jpg''background1.jpg');
    $imageset2 = array('banner2.jpg''background2.jpg');
    (and 
    however many more I need).
    How would I randomly choose an array, then take the first item in the array and put it in the banner src and take the second item and put it in the background css class?

    I'm guessing it would be something like this: (This is just a guess. I'm new to PHP).

    HTML:
    <head>
    <?php
    $imageset1 = array('banner1.jpg', 'background1.jpg');
    $imageset2 = array('banner2.jpg', 'background2.jpg');
    srand(time());
    $random = rand(0, count($imageset)-1);  
    ?>
    <style type="text/css">
    body{
    background-image:<php print '$random[imageset[2]]' ?>;
    }
    </style>
    </head>
    <body>
    <div id="header">
    <img src="<php print '$random[imageset[1]]' ?>" />
    </div>
    </body>
    
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Close.

    PHP:
    <head>
    <?php
    $banners 
    = array('banner1.jpg''banner2.jpg');
    $backs = array('background1.jpg''background2.jpg');
    srand(time());
    $random rand(0count($banners)-1);  
    ?>
    <style type="text/css">
    body{
    background-image: url(<?php print $backs[$random?>);
    }
    </style>
    </head>
    <body>
    <div id="header">
    <img src="<?php print $banners[$random?>" />
    </div>
    </body>
     
  8. MegaMan1311 thread starter macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #8
    Would this work? I think it will. I changed it to just one array with the name of the imageset as each item and I put the location of the background and the banner right before the variable is called.
    PHP:
    <head> 
    <?php 
    $imageset 
    = array('blue.jpg''red.jpg''green.jpg'); 
    srand(time()); 
    $random rand(0count($imageset)-1);   
    ?> 
    <style type="text/css"> 
    body{ 
    background-image: url(backgrounds/<?php print $imageset[$random?>); 

    </style> 
    </head> 
    <body> 
    <div id="header"> 
    <img src="banners/<?php print $imageset[$random?>.jpg" /> 
    </div> 
    </body>
     
  9. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #9
    Yes, that looks like it should work. I've never tried using PHP to print out CSS segments, but don't see any reason why it shouldn't work. Nice job bringing it together and consolidating to one array.
     

Share This Page