Different image when you press F5

**cocoalex** · 03-06-2006, 06:48 PM

Hi!

I looking for a script that will display a different image every time you refresh your page.

You can load a number of pictures on your site, that can be than displayed like this.

Thanks!

**Twey** · 03-06-2006, 06:53 PM

Randomly so, or in a "round robin" fashion?

**cocoalex** · 03-07-2006, 09:44 PM

Randomly, yes.

**Twey** · 03-07-2006, 10:38 PM

Code:

<img id="randomImage" src="/images/file.png">

<script type="text/javascript">
var imgs = new Array("/images/file.png", "images/myfile.jpg", "ourfile.gif", "http://www.mysite.com/theirfile.tiff");

document.images['randomImage'].src = imgs[Math.floor(Math.random() * imgs.length)];
</script>

**Big Vosh** · 02-07-2007, 12:28 AM

how would you load images sequentially on page load? round robin style?

B

**jscheuer1** · 02-07-2007, 05:02 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<noscript><img src="files/1_side.jpg"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=['files/1_side.jpg', 'files/2_side.jpg', 'files/3_side.jpg', 'files/5_side.jpg', 'files/8_side.jpg']

//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<img src="'+robin_im[num]+'">')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script>

</body>
</html>

**Big Vosh** · 02-08-2007, 01:45 AM

Thank you very much, it works great. Very nice. I am trying to understand what is happening in the code, but a bit confused. Is this script creating a temporary cookie that contains the number of the last file displayed? and if it is, where is this file created and stored?

Maybe I should just be happy that there are outstanding coders like John willing to help us noobs out and stop asking questions.

Thanks again,

B

**jscheuer1** · 02-08-2007, 04:42 AM

You have it pretty much right. Javascript cookies are created and read through an interaction of the browser with the code in the script. They are stored on the user's computer in a directory reserved for them by the browser. This can only happen if the user has cookies enabled, most do.

The other bit, is what I chose to store in the cookie. I could have chosen various things but I chose to store the array address number representing the next image or 0 if the current image was the last one.

**Big Vosh** · 02-09-2007, 10:09 PM

Awsome, thank you for the clarification...

B

**Tbone574** · 10-28-2007, 10:36 PM

Hey,

I was wondering if anyone knew of a way to add a specific size and boarder to this script... I just tried it on a site I was working on, and it seems to work perfectly... but I can't figure out how to adjust the size and border.

Thanks,
Tara

Thread: Different image when you press F5

Thread Tools

Search Thread

Different image when you press F5

how about a round robin script...

Thank you John

Bookmarks

Bookmarks

Posting Permissions