1. Home
  2. Computing & Technology
  3. JavaScript

Time of Day Image

1. Introduction and Sample

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 serveral 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, noom, 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.

To add this to your page you first need to obtain the images.

1 | 2 | 3 | 4

Explore JavaScript

More from About.com

  1. Home
  2. Computing & Technology
  3. JavaScript
  4. Fun with Images
  5. Time of Day Sample

©2008 About.com, a part of The New York Times Company.

All rights reserved.