Time of Day Image

One way that you can personalize your web page for individual visitors (without actually requiring any personal information about those visitors) is to display an image on your page that gives a rough indication of the time of day at that visitor's location. How do we do that? Well by using JavaScript to grab the time from your visitors computer and then selecting one of several images to display based on that time.

This JavaScript code actually uses eight images (these are supplied or you can substitute your own) to represent night, sunrise, early morning, morning, noon, afternoon, late afternoon, and sunset. One of these images will be displayed on your web page but which of the eight images gets displayed depends on what time it is according to the computer displaying the page.

Let's take a look at what the script produces at this time of the day.


As already mentioned, there are actually eight different images that this script might be displaying on this page. Which one is actually displayed depends on what time it is now at your location. If you don't believe me then return to this page in a few hours time and you will see a different image. The night image displays between 8pm and 4am so you might need to wait a bit longer before returning if you are viewing that image, all of the other images only display during two or three hour periods.

Below are the eight images used by this script. If you are going to use the supplied images then you need to right click on each of them in turn and save them using the name that appears under each image.

If you prefer you can use your own images instead of the ones below. If the images you use are not 200 pixels wide and 80 pixels high then you will need to adjust the width and height within the script itself to the size you are using. All eight images must be the same size though and have names corresponding to the names shown under the images below.



early morning




late afternoon


Now that you have the image, the next step is to copy the following script and attach it just before the </body> tag.


Once you have copied the code you just save it to an external javascript file. I called mine tod.js.You then link it into the bottom of your page using the following code:

<script type="text/javascript" src="tod.js">

The final step in installing this script is to add one of the images into the spot in the page where you want the images to appear and give it an id="tod" so that the script can find it. Anyone without JavaScript will always see that particular image. You can change the id as well as the path to the images in the bottom line of the script if you need to.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow