Random Images on Refresh

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved
Reply

Join Date: Jul 2006
Posts: 2
Reputation: elie is an unknown quantity at this point 
Solved Threads: 1
elie elie is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #11
Sep 1st, 2006
you should change the links as well
Reply With Quote Quick reply to this message  
Join Date: Apr 2007
Posts: 1
Reputation: graphic_cre8or is an unknown quantity at this point 
Solved Threads: 1
graphic_cre8or graphic_cre8or is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #12
Apr 2nd, 2007
Originally Posted by ANH! View Post
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...

Thanks for any help in advance.
Originally Posted by raywood5 View Post
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??
Reply With Quote Quick reply to this message  
Join Date: Feb 2008
Posts: 1
Reputation: seakins is an unknown quantity at this point 
Solved Threads: 1
seakins seakins is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #13
Feb 14th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Apr 2008
Posts: 1
Reputation: anandgiri is an unknown quantity at this point 
Solved Threads: 1
anandgiri anandgiri is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #14
Apr 18th, 2008
Please edit the image size of your random images in script you put it in head part
Reply With Quote Quick reply to this message  
Join Date: Feb 2005
Posts: 238
Reputation: uniquestar is an unknown quantity at this point 
Solved Threads: 11
uniquestar's Avatar
uniquestar uniquestar is offline Offline
Daniweb Sponsor

Re: Random Images on Refresh

 
0
  #15
May 27th, 2008
Many thanks for this, I know its an old thread, but Google found it, and its exactly what I need!
Tip of the Millenium: There is no point worrying about life, because no-one gets out alive.
Reply With Quote Quick reply to this message  
Join Date: Jun 2008
Posts: 1
Reputation: mspedd is an unknown quantity at this point 
Solved Threads: 0
mspedd mspedd is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #16
Jun 21st, 2008
Is it possible for this to be insearted into a phpbb3 forum headder?
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 1
Reputation: jasonbender is an unknown quantity at this point 
Solved Threads: 0
jasonbender's Avatar
jasonbender jasonbender is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #17
Sep 11th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2005
Posts: 10
Reputation: raywood5 is an unknown quantity at this point 
Solved Threads: 1
raywood5 raywood5 is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #18
Sep 12th, 2008
are you looking for something like this? http://www.amerimod.com/
Reply With Quote Quick reply to this message  
Join Date: May 2009
Posts: 6
Reputation: JimPatrick is an unknown quantity at this point 
Solved Threads: 0
JimPatrick JimPatrick is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #19
May 26th, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Oct 2009
Posts: 1
Reputation: AJ- is an unknown quantity at this point 
Solved Threads: 0
AJ- AJ- is offline Offline
Newbie Poster

Re: Random Images on Refresh

 
0
  #20
Oct 3rd, 2009
Originally Posted by jasonbender View Post
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:

  1. <SCRIPT LANGUAGE="JavaScript">
  2. var theImages = new Array()
  3. theImages[0] = 'Picture_Index_Left_Rotate_1.jpg'
  4. theImages[1] = 'Picture_Index_Left_Rotate_2.jpg'
  5. theImages[2] = 'Picture_Index_Left_Rotate_3.jpg'
  6. theImages[3] = 'Picture_Index_Left_Rotate_4.jpg'
  7. theImages[4] = 'Picture_Index_Left_Rotate_5.jpg'
  8.  
  9. var j = 0
  10. var p = theImages.length;
  11. var preBuffer = new Array()
  12.  
  13. var whichImage = Math.round(Math.random()*(p-1));
  14.  
  15. function showImage(){
  16. if(whichImage==0){
  17. document.write('<img src="Picture_Index_Left_Rotate_1.jpg" width="407" height="336" border="0" />');
  18. }
  19. else if(whichImage==1){
  20. document.write('<img src="Picture_Index_Left_Rotate_2.jpg" width="407" height="336" border="0" />');
  21. }
  22. else if(whichImage==2){
  23. document.write('<img src="Picture_Index_Left_Rotate_3.jpg" width="407" height="336" border="0" />');
  24. }
  25. else if(whichImage==3){
  26. document.write('<img src="Picture_Index_Left_Rotate_4.jpg" width="407" height="336" border="0" />');
  27. }
  28. else if(whichImage==4){
  29. document.write('<img src="Picture_Index_Left_Rotate_5.jpg" width="407" height="336" border="0" />');
  30. }
  31.  
  32. }
  33.  
  34. function showImage2(){
  35. if(whichImage==0){
  36. document.write('<img src="Picture_Index_Right_Rotate_1.jpg" width="518" height="336" />');
  37. }
  38. else if(whichImage==1){
  39. document.write('<img src="Picture_Index_Right_Rotate_2.jpg" width="518" height="336" />');
  40. }
  41. else if(whichImage==2){
  42. document.write('<img src="Picture_Index_Right_Rotate_3.jpg" width="518" height="336" />');
  43. }
  44. else if(whichImage==3){
  45. document.write('<img src="Picture_Index_Right_Rotate_4.jpg" width="518" height="336" />');
  46. }
  47. else if(whichImage==4){
  48. document.write('<img src="Picture_Index_Right_Rotate_5.jpg" width="518" height="336" />');
  49. }
  50.  
  51. }
  52.  
  53. </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
Last edited by peter_budo; Oct 4th, 2009 at 7:48 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC