Random Images on Refresh

I think you'll need some server side code. Something that looks at a timestamp, a rolling counter, a database value, something... and automatically authors the appropriate image tag. Right now, I can't think of how you'd accomplish this with client scripting.

You can use JS and a cookie...

Create a directory with images named ##.jpg

Then when the page loads read or set the cookie with that image id (##) the next time the page loads read the cookie and get the id ( ##) and then switch the image 'image_swap' with the next numbered image or reset the number id (##) when you reach the last valid id (##) for images you have!

Simple Stuff

demo

This script will load random images and they will change when you refresh. I hope this is what you are looking for:

Put in the head:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
 
//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images
 
var j = 0
var p = theImages.length;
var preBuffer = new Array()
 
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
 
function showImage(){
    if(whichImage==0){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==1){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==2){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==3){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==4){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
 
}
 
</script>
 
//Then put this where you want the images to appear:
 
<script>showImage();</script>

Did you want a random page on refresh?

Server side would be better for this. But if you wanted to do it client side, then just have an array of URLs and use the document.location.href attribute (randomly selecting a loaction).

Of course you couldn't have the random href set onload, otherwise you would trap your client in an infinite loop. Assign it on unload.

thanks raywood for the code although i no longer needed..but it was quite learning

Hi, I am trying to use the code example you provided for using javascript to display a random image. I implemented the code but my problem now is that IE with service pack 2 seems to block that part of the page as "active content" and you have to click the annoying notice bar to allow it manually. My question is there any way to avoid that using the example you provided? I know some sites like James Madison University (www.jmu.edu) have randomly selected images on their homepage and it doesn't come up blocked there so I'm trying to figure out why.

Thanks

That's only the case with locally loaded HTML files. Once you publish to a website, your users will not get that message.

This script will load random images and they will change when you refresh. I hope this is what you are looking for:

Put in the head:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()

//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images

var j = 0
var p = theImages.length;
var preBuffer = new Array()

for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
if(whichImage==0){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==1){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==2){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==3){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==4){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}

}

</script>

//Then put this where you want the images to appear:

<script>showImage();</script>

Wow thanks, a code that actually works... but I still have a problem/query...

Is there any way that in 4 refreshes every image is shown once?

Dont think I can explain much more... :confused:

Thanks for any help in advance.

hey all, I am trying to make use of this script as well - I understand where to paste the script in the head, however - where do I paste the: <script>showImage();</script>

I tried pasting in the cell where the image appears - do I not have an img tag there? It creates a large gap in my table?

I am new!

thanks - also -

The only part of the script I edit is the image ???

//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images

correct?

you should change the links as well

Wow thanks, a code that actually works... but I still have a problem/query...

Is there any way that in 4 refreshes every image is shown once?

Dont think I can explain much more... :confused:

Thanks for any help in advance.

This script will load random images and they will change when you refresh. I hope this is what you are looking for:

Put in the head:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
 
//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images
 
var j = 0
var p = theImages.length;
var preBuffer = new Array()
 
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
 
function showImage(){
    if(whichImage==0){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==1){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==2){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==3){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==4){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
 
}
 
</script>
 
//Then put this where you want the images to appear:
 
<script>showImage();</script>

Is there a way to do this multiple times on one page??

I would like to have a similar script that would pull images directly from a folder of images. I'll have over 200 of these images and would like a different on to be displayed when the browser is refreshed. Any ideas? The Rookie Webmaster. Thanks in advance for your time.

Please edit the image size of your random images in script you put it in head part

Many thanks for this, I know its an old thread, but Google found it, and its exactly what I need!

Is it possible for this to be insearted into a phpbb3 forum headder?

Lets say you wanted to have two images on the page change at the same time... and the images related to each other so that ....

When showImage loads you have a 2nd image location on the page that goes along with it.

I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.

I'm just learning javascript but think I understand the logic needed.

are you looking for something like this? http://www.amerimod.com/

Hi I am looking for something similar but for website background image. I have 3 images that cover the whole browser and I want them to rotate when some hits refresh on the browser. Can anyone help me on this thanks.

Lets say you wanted to have two images on the page change at the same time... and the images related to each other so that ....

When showImage loads you have a 2nd image location on the page that goes along with it.

I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.

I'm just learning javascript but think I understand the logic needed.

slightly modified version of the same code to get two images that are linked to show up:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
theImages[0] = 'Picture_Index_Left_Rotate_1.jpg' 
theImages[1] = 'Picture_Index_Left_Rotate_2.jpg' 
theImages[2] = 'Picture_Index_Left_Rotate_3.jpg' 
theImages[3] = 'Picture_Index_Left_Rotate_4.jpg' 
theImages[4] = 'Picture_Index_Left_Rotate_5.jpg' 

var j = 0
var p = theImages.length;
var preBuffer = new Array()

var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
if(whichImage==0){
document.write('<img src="Picture_Index_Left_Rotate_1.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==1){
document.write('<img src="Picture_Index_Left_Rotate_2.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==2){
document.write('<img src="Picture_Index_Left_Rotate_3.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==3){
document.write('<img src="Picture_Index_Left_Rotate_4.jpg" width="407" height="336" border="0" />');
}
else if(whichImage==4){
document.write('<img src="Picture_Index_Left_Rotate_5.jpg" width="407" height="336" border="0" />');
}

}

function showImage2(){
if(whichImage==0){
document.write('<img src="Picture_Index_Right_Rotate_1.jpg" width="518" height="336" />');
}
else if(whichImage==1){
document.write('<img src="Picture_Index_Right_Rotate_2.jpg" width="518" height="336" />');
}
else if(whichImage==2){
document.write('<img src="Picture_Index_Right_Rotate_3.jpg" width="518" height="336" />');
}
else if(whichImage==3){
document.write('<img src="Picture_Index_Right_Rotate_4.jpg" width="518" height="336" />');
}
else if(whichImage==4){
document.write('<img src="Picture_Index_Right_Rotate_5.jpg" width="518" height="336" />');
}

}

</script>

after this use
<script>showImage();</script> and <script>showImage2();</script>
where you need the image to show up in the body
(note - took out link so if you need it to link add the <a href> tag)
Also - the images are called staticly...so no need for the i variable here

"

This script will load random images and they will change when you refresh. I hope this is what you are looking for:

Put in the head:

<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
 
//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images
 
var j = 0
var p = theImages.length;
var preBuffer = new Array()
 
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
 
function showImage(){
    if(whichImage==0){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==1){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==2){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==3){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
    else if(whichImage==4){
    document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
    }
 
}
 
</script>
 
//Then put this where you want the images to appear:
 
<script>showImage();</script>

"

I used this code and was able to work it into my site so that my image changes randomly when the page is refreshed. however at this point I want to make the image that is changed, into a link. this is a banner advertisement image on my page and when they click the photo I want people to be able to go to the page that the photo is linking them to. I have made a link there but it is a very small little line, I want it to be the whole picture like I am accustomed to.

One of the examples is this:
http://www.poliisi.fi/poliisi/home.nsf/pages/index_eng

I am also new and searching for this kind of behavior of image change. Thanks everyone for their contributions.