Make your own free website on Tripod.com

Javascript Graphic Clock

Version 2.3  New!
Written by
Kendal Van Dyke

Background
Version History
Known errors  New!
Adding the Clock to your page
Receiving Updates via E-mail
Sites using the clock  New!
Additional Resources

-------------------------------------

BACKGROUND

Netscape's Javascript, originally created as a scaled down version of Sun's Java, provides a powerful scripting language that can be used to create more user friendly and appealing HTML documents by providing access to GUI events and window elements inclu ding widgits, frames, and internal document storage arrays. One of these arrays in particular is the document.images[] array. One feature of access to this array is that the source of an image contained within the array can be changed. This is a very powerful feature because it allows a user to create dynamic documents in which the visible images in the document can be changed based on window events or results of a call to a function. One popular example of this in action is changing an image that is part of a menu so that when the mouse pointer is over the image it will "light up" or perform some other effect to signify which menu item is currently chosen. The Javascipt graphic clock takes advantage of the ability to change an image source in order to constantly update to reflect the current time. It works by using a function to update the clock that does not depend on any GUI event and is self sufficient by calling itself recursively.

TOP

-------------------------------------

VERSION HISTORY

TOP

-------------------------------------

KNOWN ERRORS

There have been a few concerns expressed to me that when the clock script is placed inside a set of tables that the user will occasionally see a duplicate set of clock images in the upper left corner of the screen. I have seen this happen, and I am not quite sure of exactly why it happens to tell the truth. I think it has something to do with how Netscape handles the Javascript code, but I could very well be wrong.

In any case, there are no other known errors at the present time. If you happen to experience the problem described above, or you find some other error, please report it to me!

TOP

-------------------------------------

ADDING THE CLOCK TO YOUR WEB PAGE

Adding the Graphic Clock to your page is very easy. Follow these simple steps and you too can have a graphic clock on your web page:
  1. First you will need to find or create for yourself a set of digit images 0-9, a separator image (in most cases an image of a colon), "am" and "pm" images, and a blank spacer image. All of these images need to be of the same height. The digit images all need to be of the same width, as do the "am" and "pm" images. Once you have these images, place them all in a directory together where they can be referenced by the HTML document that will display the clock.

  2. Next, you will need to copy the script to your HTML document. When you copy the code into the document, you should place it at the point in the document where you want the clock to appear. You might have to play with the alignment (ie. Place CENTER tags around the start and end of the script) to get it to appear in the right place. For even better layout control, you could create a table and then in the table data place the script. The code for the script can be viewed HERE.

  3. Once you have copied the code into your document, you will need to change a few things in the code itself. Don't worry, it's not hard - you're only changing a few numbers around. Here are the things that you need to change:

    • Go to the line in the script that contains var image_base = "graphics/clock/"; You will need to change "graphics/clock/" to reflect the directory where you have the images stored. This directory should be the directory in relation to where the HTML document you want the clock to appear on resides.
    • On the line containing var image_type = ".gif";, change ".gif" to reflect the type of images you are using (e.g. .gif, .jpg).
    • On the line containing var image_height = 18;, change the number 18 to the height in pixels of all of your images.
    • On the line containing var digit_width = 13 , change the number 13 to reflect the width in pixels of your digit images.
    • On the line containing var ampm_width = 38, change the number 38 to the width of your "am" and "pm" images in pixels.
    • On the line containing var separator_width = 6, change the number 6 to reflect the width in pixels of your separator image.
    • Finally, the line which contains var clockDelay = 900; controls the amount of time between when the clock switches the separator image from your separator image to your blank image, and vice-versa. Keep this number at 900 for the change to occur every second, or change 900 to 400 for the change to occur every half second.

  4. And, believe it or not, you're now done! Assuming you put the images in the correct place and properly changed the code, your clock should now appear in your document.

TOP

    -------------------------------------

RECEIVING UPDATES VIA E-MAIL

    To save yourself the trouble of having to revisit this page every so often to see if the code has been updated, you can add your name to a distribution list to receive updates automatically through E-mail. Updates include version changes and announcements of new digit packages (digit packages coming soon!). If you would like to add your name to the distribution list, please submit your E-mail address using the form below.

    Email:

TOP

    -------------------------------------

SITES USING THE CLOCK

    Here are known sites that currently use the clock script: If you would like to have your site listed here for others to see (and visit) then please send E-mail to kendal@freenet.tlh.fl.us.

TOP

    -------------------------------------

ADDITIONAL RESOURCES

    There are all kinds of resources for Javascript available on the net. Here are what I would consider a few of the better ones to get more information about the language:

    Do you have any comments, questions, or anything about the clock that you can't figure out? If so, you can email me, Kendal Van Dyke, at: kendal@freenet.tlh.fl.us

TOP


    [hit count] Last Modified: August 6th, 1997