Home : Internet : JavaScript : Image of the Day

How to Display a Different Image Each Day

Use the code below to display a different image on your web page for each day of the week (as per the example on the right).

In this example the images are stored in a folder called "images". Change the imlocation variable to reflect the location of your own images.

<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>

 

Variation: Include Hyperlinks

In this version you can include a separate link for each image (change the example links to your own).

<script type="text/javascript"><!--
var imlocation = "images/";
function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
}
function linkArray (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';
link = new linkArray(7);
link[0] = 'link1.html';
link[1] = 'link2.html';
link[2] = 'link3.html';
link[3] = 'link4.html';
link[4] = 'link5.html';
link[5] = 'link6.html';
link[6] = 'link7.html';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.write('<a href="' + link[imagenumber] + '"><img src="' + imlocation + image[imagenumber] + '" border="0"></a>');
//--></script>