Different image every day

This site is best viewed in a modern browser with JavaScript enabled.

silvereye

Hi guys
I was wondering if you could help me with this. I've been trying to use this code but...

<script type="text/javascript"><!--
var imlocation = "images/";
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
image = new ImageArray(7);
image[0] = 'sunday.gif';
image[1] = 'monday.gif';
image[2] = 'tuesday.gif';
image[3] = 'wednesday.gif';
image[4] = 'thursday.gif';
image[5] = 'friday.gif';
image[6] = 'saturday.gif';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<img src="' + imlocation + image[imagenumber] + '">');
//--></script>

... this seems to be working only with those seven days exactly. I need an array of four picture that would change after four days, not seven pictures-seven days. I tried this

image = new ImageArray(4);
image[0] = '01.gif';
image[1] = '02.gif';
image[2] = '03.gif';
image[3] = '04.gif';

but just making it short doesn't do it. Please, help me, I'm not good with this stuff and I would really appreciate any hint.

vwphillips

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<img id="img" src="#" />

<script type="text/javascript">
/*<![CDATA[*/

var Images=[
 'http://www.vicsjavascripts.org/StdImages/1.gif',
 'http://www.vicsjavascripts.org/StdImages/2.gif',
 'http://www.vicsjavascripts.org/StdImages/3.gif',
 'http://www.vicsjavascripts.org/StdImages/4.gif'
];

document.getElementById('img').src=Images[Math.floor(new Date()/1000/60/60/24)%Images.length];

/*]]>*/
</script>
</body>

</html>

silvereye

Works like a charm, thank you very much!

root

Also, do you have access to PHP?

If you do then you could do the image selection serverside with a method like...

In the head of the HTML page

<?php
$img = array(0=>"Sunday.gif",1=>"Monday.gif",2=>"",3=>"Wednesday.gif",4=>"Thursday.gif",5=>"Friday.gif",6=>"Saturday.gif");
$dayOfWeek = Date("w"); // 0=sunday

$theImage = $img[ $dayOfWeek ];

?>

then in the body where you want the DOW image

<img name="DayOfWeek" src="./image/path/to/folder/<?php echo $theImage; ?>"  />

*not tested and not guaranteed to work but the principle is to gather the DOW, assuming that the web host's server has the correct time / date.

Anyway, thats the idea floated if you want to do the same server-side as opposed to client-side, both have advantages and disadvantages, one already discussed and also another is if the server and client are in different timezones or the clients clock is not set correctly, yes, some people can't be bothered to have the right time on their computers, go figure!!

So if someone wants to add to that, point out any errors, be my guest.

deathshadow

I agree that I'd handle it server-side instead of client-side in JS. I'd also code it so that the number of images can be variable instead of fixed; and base it on the actual *nix timestamp instead of day of week.

<?php 

$images = [
	'first.png',
	'second.png',
	'third.png',
	'fouth.png'
];

echo '
	<img src="', $images[(time() / 86400) % count($images)], '" alt="daily image" />';

?>

Far, FAR simpler.

deathshadow

Oh, and in JavaScript that would go like this:

var
	images = [
		'first.png',
		'second.png',
		'third.png',
		'fourth.png'
	],
	d = new Date();

document.getElementById('img').src = images[
	(d.getTime() / 86400000) % images.length
];

You can change the number of images until blue in the face. Which is what vwPhillips was trying to do, but got a bit complicated on IMHO. (much less dividing Date() shouldn't work?)

root

Sweet.