Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Random Image Sets

M

MegaMan1311

macrumors regular
Original poster
Jun 30, 2007
216
0
USA
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
 
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(0, count($classes)-1);

Then you can write out something like,
PHP: 
<body <?php print 'class="'. $classes[$random] .'"'; ?>>
 
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.
 
MegaMan1311 said:
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.
Click to expand...

just use an array of strings with the image src in them? i gues you want someone to code it for you. l2google
 
MegaMan1311 said:
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.
Click to expand...

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

PHP: 
<head>
<?php
$banners = array('banner1.jpg', 'banner2.jpg');
$backs = array('background1.jpg', 'background2.jpg');
srand(time());
$random = rand(0, count($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>
 
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(0, count($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>
 
MegaMan1311 said:
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.
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back