Roxydoll12 Web Help

 

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>

 

 


GETTING STARTED

Check here first.  Everything about how to get started on your first webpage!

GRAPHICS

TUTORIALS

FRAMES

TABLES AND MENUS

FONTS AND HEADLINES

CGI AND PERL

CARTOON DOLLS

MUSIC

OTHER NEAT STUFF

© 1998-2004 by Alexandra Thelin