|

This goes out to Jamie Nicole, who helped me with this tutorial.
Here's the result:
1. Make an image that you want your clock to appear on. Here's one made by Jamie Nicole:

Make one about this size, decorated as you want. You might want to make a pixel on the left hand side, or have the graphic a different color. Customize it so that it is the way you want.
2. Make up a page called "clock.html"
On this page, put the following code in the BODY section(Remember when you copy this code to take out the *s):
<*BODY onLoad="clock()" text="#FFFFFF" font face="Verdana" size="1"*>
<*font face="Verdana" size="1"*>
<*span id="pendule" style="position: absolute; left: 34; top: 18; width: 200; height: 19"*>
<*/span>
<*SCRIPT LANGUAGE="JavaScript">
<*!-- Original: Xavier R. (xav@lougaou.com) -->
<*!-- Modified: Benjamin Wright, Editor -->
<*!-- Web Site: http://www.lougaou.com/ -->
<*!-- This script and many more are available free online at -->
<*!-- The JavaScript Source!! http://javascript.internet.com -->
<*!-- Begin
function clock() {
if (!document.layers && !document.all) return;
var digital = new Date();
var hours = digital.getHours();
var minutes = digital.getMinutes();
var seconds = digital.getSeconds();
var amOrPm = "AM";
if (hours > 11) amOrPm = "PM";
if (hours > 12) hours = hours - 12;
if (hours == 0) hours = 12;
if (minutes <= 9) minutes = "0" + minutes;
if (seconds <= 9) seconds = "0" + seconds;
dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
setTimeout("clock()", 1000);
}
// End -->
<*/script>
<*/font>
<*p>
<*img border="0" src="http://www.yoursitegoeshere.com/yourimagename.gif"
width="100" height="18"><*/p>
Note that you can customize the text color, and change the position of the numbers on the graphic by changing the positioning numbers. You also need to put in the correct size of your background image.
3. Now put this code on your page where you want your clock to appear:
<*iframe border="0" frameborder="no"
framespacing="0"
src="http://www.yoursite.com/clock.html"
scrolling="no" width="87" height="33"
allowtransparency="true"><*/iframe>
|