home / articles / javascript

A JavaScript image and link of the day displayer

A very simple script, but quite useful as it enables you to have a different picture on the web page for every day of the week:

Don't believe me? Then come back tomorrow and take another look at this page!

The script to generate the different pictures is shown below. It is a very simple script - but this is itself a good thing, as it works properly in all the JavaScript capable browsers I have ever encountered. It is also a good script to try out if you are new to JavaScript programming.

All the script needs to do is to find the current date by using the Date function. It stores the current date in a variable called time. From the time variable, the current day is then extracted, and placed in another variable - this one called today.

When the Date function returns a value of the current day, it is in numerical form. Javascript refers to Sunday as day 0, and Saturday as day 6. After it has done this, this number can be used to load a different image according to the day of the week. The final line of the script uses the document.write procedure to output some HTML to the web browser. This HTML points to an image. The important part of this part of the script is that the IMG SRC is dayX.gif, where X is the number corresponding to the day of the week. So the image day0.gif is the picture the for Sunday, and day4.gif is for Thursday. You can see that the today variable is included in the document.write statement to ensure that the correct image is loaded depending on the day.

<SCRIPT language="JavaScript">
<!--
//make something called time which contains the current date;
time = new Date ();

//extract the correct day from time and put it into a variable called today;
var today = time.getDay();

//write some HTML to load the right image
document.write("<P><CENTER><IMG ALT='Day of the week picture' SRC=day" + today + ".gif></CENTER></P>");
// -->
</SCRIPT>

This script would need no modifications if you want to use it - as long as your images are called day0.gif to day6.gif inclusive, and they are stored in the same directory as the web page that contains the JavaScript.

Future modifications to the script:

As always, JavaScripts can always be improved upon, so here are two possible suggestions for further enhancements:

• You might like to modify the script to show a different hyperlink depending on the day of the week. The easiest way to do this would be to have a series of pages such as link0.html to link6.html. Then by modifying the last line of the script to something like this:

document.write("<P><CENTER><A HREF='link" + today + ".html'><IMG ALT='Day of the week picture' SRC=day" + today + ".gif></A></CENTER></P>");

clicking on the image would then take you to link0.html on a Sunday, and link4.html on a Thursday.

• It would also be straightforward to adapt the script to show different pictures according to the month of the year - or even to display a certain image on special days, like Christmas, for example.

Author: Brett Burridge
Date: 02/19/98

More articles about JavaScript
More articles by Brett Burridge
Author Biography