Using the basic Javascript clock I'd already developed, I extended the functionality to display a clock with graphical digits rather than a basic text clock. Although there is more code, most is to calculate and position the digits. All the digits are held in a single file to reduce load time.

There are fourteen characters in the image: 0-9, am, pm, blank and a separator. The colours and numeric representation can be anything at all. Any browser-supported image type should do, but GIFs are probably the most efficient. The character height and width is arbitrary, but must be the same for all except the separator, which can have a different width. These parameters are passed to the object on initialisation.

Usage:
Add this code to your page where the clock should appear.

<script type="text/javascript">wlg=new digitalclock(uid,imageFile,charWidth,sepWidth,charHeight);wlg.start(); </script>

uid: Arbitrary identifier for this clock.
imageFile: user define image file for this clock. See above.
charWidth, sepWidth, charHeight: sizes of characters and separator within the image.

Note that the call to wlg.start() need not appear immediately, and could be called elsewhere.

Methods

These methods can be called at any time. You might use them to adjust the configuration before calling start(),

loadImages(imageFile,charWidth,sepWidth,charHeight)
E.g. wlg.loadImages("digits.gif", 16, 9, 21)

setOffset(minutes)
E.g. wlg.setOffset(-60) to set an offset of UTC-1 hour.

start()
Start the ticking of the clock.E.g. wlg.start()

A work in progress

Every time I look at the digital clock I think of modifications and enhancements.
You might like to think about these ideas:

12-hour/24-hour option
A parameter to add CSS styling
Add a callback function to the tick to perform some function like changing clock colour at a certain time.
...