Day of Week Image

One way that you can have your web page to changed when a visitor returns a day or two later is to display a different image on your page depending on the day of the week. How do we do that? Well by using JavaScript to grab the day from your visitors computer and then selecting one of several images to display based on that day.

This JavaScript code uses seven images to represent the different days of the week. You can use whatever images you like, the only limitation is that all of the images will need to be the same size.

I have used simple images that contain just the name of the particular day. Here is what the script produces on this day of the week using my images.

day of week image

Below are the seven images that I used with the example of this script. You will probably want to create your own but you can use mine if you want. Whichever way you go you need to make sure that you save the images with the appropriate filenames that appear under the images to match with the days of the week on which they are to display.

All seven images must be the same size, in the same folder path, and of the same file type.

sunday
sunday.gif

monday
monday.gif

tuesday
tuesday.gif

wednesday
wednesday.gif

thurdsday
thursday.gif

friday
friday.gif

saturday
saturday.gif

You need to attach one of the images into the page where you want the images to be displayed. It can either be one of the seven images or a different image as long as it is the same size. It will be what will appear in that spot if JavaScript is not available. For example:

<img id="dow" src="graphics/saturday.gif" width="200" height="80" alt="day of week image"/>

The only distinguishing thing about this particular image is that it has a specific id that identifies the image that is to be replaced with the specific day of the week images.

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

JavaScript

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

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

The final step in installing this script is to adjust the options in the last line of the script.

})('graphics/','gif','dow');

These first of these parameters identifies the path to the images. If the images are in the same folder as the web page then it should be empty - '' - if not it is the sub-folder where the images can be fount followed by a slash.

The second parameter is the type of the images being used - 'gif', 'jpg', or 'png'.

The third parameter is the id of the image that the script is to update - in my example I gave the image an id of 'dow';

You can include multiple day of week images into the same web page by adding multiple copies of the same code into the page and using a different path and different id for each.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate