|
 |
|
|
|
| Thread title: Random image on refresh? |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
05-30-2008, 09:26 PM
|
#1
|
Status: Member
Join date: Aug 2006
Location: Newcastle upon Tyne
Expertise:
Software:
Posts: 172
|
 Random image on refresh?
I need to be able to have a header image that changed to one of a few different versions each time the page is refreshed.
I have absolutly no clue on how to do it, can anyone help?
|
|
|
|
05-30-2008, 09:45 PM
|
#2
|
Status: Member
Join date: May 2007
Location: US
Expertise:
Software:
Posts: 380
|
Here is an easy way to set it up:
create a folder, and inside, add your images. Name them 1.jpg, 2.jpg, and so on.
Then on the page you want to show the image:
Code:
<img src="images/rand/<?php echo rand(0,2); ?>.jpg" />
The "2" in rand(0,2) should be the total number of images you have. 
Haven't tested it or anything, but should work. 
|
|
|
|
05-30-2008, 10:24 PM
|
#3
|
Status: Member
Join date: Aug 2006
Location: Newcastle upon Tyne
Expertise:
Software:
Posts: 172
|
Excellent. Thanks! I will get the rest of the images created and give it a go. Thanks!
|
|
|
|
07-11-2008, 11:50 PM
|
#4
|
Status: Member
Join date: Aug 2006
Location: Newcastle upon Tyne
Expertise:
Software:
Posts: 172
|
Ok, I went to give this a go today and then remembered that my banner image was a div background image which was set using my css file.
Below is an extract from the CSS file for that div. Can anyone tell me how to get it working?
Code:
#banner {
background-image:url(images/banner.jpg);
background-repeat:no-repeat;
width:798px;
height:188px;
float:left;
}
I tried this, but it did not work:
Code:
#banner {
background-image:url(images/rand/<?php echo rand(0,2); ?>.jpg);
background-repeat:no-repeat;
width:798px;
height:188px;
float:left;
}
Obviously I had two banners contained within a file called rand which again was in the images folder.
Does anyone have any thoughts? I really need to get this working.
|
|
|
|
07-11-2008, 11:59 PM
|
#5
|
Status: Junior Member
Join date: Mar 2008
Location:
Expertise:
Software:
Posts: 42
|
Its probably because the file isnt .php. I think you'd have to edit your apache to get it to work in a .css file, and I'm not that experienced so you'd have to ask someone else..
|
|
|
|
07-12-2008, 12:16 AM
|
#6
|
Status: Member
Join date: May 2007
Location: US
Expertise:
Software:
Posts: 380
|
Just don't put it as a background image. Keep the div, and put the image in that, in the HTML (which needs to now be in a .php file).
Code:
<div id="banner">
<img src="images/rand/<?php echo rand(0,2); ?>.jpg" alt="Banner" />
</div>
|
|
|
|
07-12-2008, 12:25 AM
|
#7
|
Status: Member
Join date: Aug 2006
Location: Newcastle upon Tyne
Expertise:
Software:
Posts: 172
|
See I want to avoid making all the pages .php files.
The site is already online and has been for a while. We have thousands of links to our site from other websites so if I start to change extensions then they will be lost.
|
|
|
|
07-12-2008, 01:19 AM
|
#8
|
Status: Member
Join date: May 2007
Location: US
Expertise:
Software:
Posts: 380
|
Then you can do that with .htaccess. Have the HTML pages parsed like PHP pages.
|
|
|
|
07-17-2008, 01:41 AM
|
#9
|
Status: Member
Join date: Feb 2005
Location: Quebec, Canada
Expertise:
Software:
Posts: 441
|
Add a class to your div, something like img1, img2, img3, etc.
Code:
div.img1 {background: url(/image1.jpg);}
div.img2 {background: url(/image2.jpg);}
div.img3 {background: url(/image3.jpg);}
Then just use the same PHP code given in this thread earlier to generate the class name instead of the image.
Code:
<div class="img<?php echo rand(0,2); ?>"></div>
|
|
|
|
07-20-2008, 08:24 PM
|
#10
|
Status: Junior Member
Join date: Jul 2008
Location: Abilene TX
Expertise: Design, PHP, JS, HTML5, CSS3
Software:
Posts: 37
|
Still, though, this is the javascript forum, and all the advice given has been PHP (which I DO think is the better option). But since you don't want to use PHP, you'd probably do something like this in your page's HEAD section:
Code:
<script type="text/javascript">
function randomimage()
{
var path = "/path/to/images/folder/"; /* your image path goes here */
var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";
images[3] = "image4.jpg"; /* etc. for all your image files */
var randint = Math.round( Math.random() * ( images.lenth - 1 ) ); /* gives you a random integer between 0 and the key of the final image specified (in this case 3), inclusive */
var randimage = path+images[randint]; /* specifies one of your images at random */
document.getElementById("MyDivID").style.background-image = randimage; /* sets the background of the element with the id set to "MyDivID" to the random image chosen above */
}
</script>
Then modify your opening BODY tag to look like this:
Code:
<BODY onload="randomimage()">
This code has not been tested, so it may have some errors, but hopefully it will give you the general idea of what you're going for here.
Hope this helps!
--Josh
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
|
|
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed