PDA

View Full Version : 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
<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
<!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

jscheuer1
10-29-2007, 04:31 AM
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

Do you mean a separate border and size for each image? That could be arranged. But if you just mean a border and a size for whatever image, here is where the image tag is written out:


document.write('<img src="'+robin_im[num]+'">')

You could add attributes for border, width and height:


document.write('<img src="'+robin_im[num]+'" border="1" height="102" width="147">')

Or, inline style:


document.write('<img style="border:1px solid red;width:147px;height:102px; src="'+robin_im[num]+'">')

Or, and here is where using different borders and dimensions for each image could come in, add an id based partly upon the image number:


document.write('<img id="robimage_'+num+'" src="'+robin_im[num]+'">')

This would give you id's like:

robimage_0
robimage_1
robimage_2

and so on, for however many images you have defined. The styles for each of these images could be defined in a stylesheet for the page.

wpiotraschke
08-30-2008, 09:14 AM
<!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>

Greetings John,
I found this post and successfully implemented the code into Komposer, but have encountered a couple challenges. Disclosure: I do not know any HTML or Java. My successes to date have been by trial and error. Anyways, the images upon loading seem to have a default boarder. Can this be set within this script? Second, I tried addind alternate text for the images but was unsuccessful. Any help would be greatly appreciated.
thanks, Wulff

mburt
08-31-2008, 01:00 AM
border="1" height="102" width="147"

Border and width/height for img are depreciated, use CSS:

http://css-tricks.com/list-of-depreciated-elements-still-in-widespread-use/