| | |
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 |
•
•
Join Date: Jan 2005
Posts: 18
Reputation:
Solved Threads: 2
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
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
•
•
Join Date: Jan 2005
Posts: 10
Reputation:
Solved Threads: 1
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]
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]
Last edited by cscgal; Aug 15th, 2006 at 10:31 am.
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.
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.
•
•
Join Date: Jun 2005
Posts: 1
Reputation:
Solved Threads: 1
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
Thanks
•
•
Join Date: Aug 2006
Posts: 1
Reputation:
Solved Threads: 1
•
•
•
•
Originally Posted by raywood5
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 any way that in 4 refreshes every image is shown once?
Dont think I can explain much more...
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?
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?
![]() |
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: bookmarklet problem
- Next Thread: Detect browser window closing event in Firefox -
| Thread Tools | Search this Thread |
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box bug calendar cart checkbox codes column createrange() css cursor date debugger decimal design dom download dropdown editor element embed enter error explorer firefox focus form frameworks getselection google gwt hiddenvalue hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 object onmouseover parent paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select shopping size software sql text textarea unicode w3c website window windowofwords windowsxp wysiwyg






