DaniWeb IT Discussion Community

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)

jeeva86 Apr 26th, 2005 12:39 am
Random Images on Refresh
 
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..

tgreer Apr 26th, 2005 11:15 am
Re: 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.

demo Apr 26th, 2005 11:44 am
Re: Random Images on Refresh
 
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

raywood5 May 5th, 2005 3:23 pm
Re: Random Images on Refresh
 
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]

alpha_foobar May 5th, 2005 7:32 pm
Re: Random Images on Refresh
 
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.

jeeva86 May 19th, 2005 11:21 am
Re: Random Images on Refresh
 
thanks raywood for the code although i no longer needed..but it was quite learning

Matt02 Jun 13th, 2005 3:49 pm
Re: Random Images on Refresh
 
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

tgreer Jun 13th, 2005 4:45 pm
Re: Random Images on Refresh
 
That's only the case with locally loaded HTML files. Once you publish to a website, your users will not get that message.

ANH! Aug 7th, 2006 2:57 pm
Re: Random Images on Refresh
 
Quote:

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>

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.

drogue Aug 14th, 2006 2:16 pm
Re: Random Images on Refresh
 
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?


All times are GMT -4. The time now is 9:36 am.

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC