Random Images on Refresh

Question

jeeva86 0 Newbie Poster

19 Years Ago

Hi, I wanted to know how would you be able to change an image on a website to another one when refresh is hit on the tool bar in IE

or how would i get it to open up a different html file when i hit refresh

and i'm not talking abt any automatic delay stuff..

javascript

19 Contributors
21 Replies
4K Views
5 Years Discussion Span
Latest Post 14 Years Ago Latest Post by KazmiLahore

tgreer 189 Made Her Cry

19 Years Ago

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.

demo 0 Newbie Poster

19 Years Ago

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

alpha_foobar 5 Junior Poster

19 Years Ago

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.

Matt02 0 Newbie Poster

19 Years Ago

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

ANH! 0 Newbie Poster

18 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

raywood5 0 Newbie Poster · Answer 1 · 2005-05-06T00:23:26+00:00

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>

jeeva86 0 Newbie Poster · Answer 2 · 2005-05-19T20:21:07+00:00

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

tgreer 189 Made Her Cry Team Colleague · Answer 3 · 2005-06-14T01:45:23+00:00

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

drogue 0 Newbie Poster · Answer 4 · 2006-08-14T23:16:32+00:00

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?

elie 0 Newbie Poster · Answer 5 · 2006-09-02T08:39:33+00:00

elie 0 Newbie Poster

18 Years Ago

you should change the links as well

graphic_cre8or 0 Newbie Poster · Answer 6 · 2007-04-03T02:30:03+00:00

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??

seakins 0 Newbie Poster · Answer 7 · 2008-02-15T01:55:24+00:00

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.

anandgiri 0 Newbie Poster · Answer 8 · 2008-04-18T15:08:02+00:00

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

uniquestar 26 Posting Whiz in Training · Answer 9 · 2008-05-27T20:57:29+00:00

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

mspedd 0 Newbie Poster · Answer 10 · 2008-06-21T21:55:01+00:00

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

jasonbender 0 Newbie Poster · Answer 11 · 2008-09-12T04:42:32+00:00

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.

raywood5 0 Newbie Poster · Answer 12 · 2008-09-12T18:59:03+00:00

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

JimPatrick 0 Newbie Poster · Answer 13 · 2009-05-27T06:47:20+00:00

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.

AJ- 0 Newbie Poster · Answer 14 · 2009-10-03T10:06:34+00:00

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

adam1 0 Newbie Poster · Answer 15 · 2009-11-03T03:18:14+00:00

"

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.

KazmiLahore 0 Newbie Poster · Answer 16 · 2010-09-30T22:31:45+00:00

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.