DaniWeb IT Discussion Community - Random Images on Refresh

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Random Images on Refresh (http://www.daniweb.com/forums/thread22560.html)

Re: Random Images on Refresh

you should change the links as well

Re: Random Images on Refresh

Quote:

Originally Posted by ANH! (Post 241096)

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.

Quote:

Originally Posted by raywood5 (Post 118362)

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:

[html]<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>[/html]

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

Re: Random Images on Refresh

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.

Re: Random Images on Refresh

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

Re: Random Images on Refresh

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

Re: Random Images on Refresh

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

Re: Random Images on Refresh

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.

Re: Random Images on Refresh

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

Re: Random Images on Refresh

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.

Re: Random Images on Refresh

Quote:

Originally Posted by jasonbender (Post 689404)

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