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

All about making graphics and adding them to your page!

TUTORIALS

How to make more advanced graphics and code effects

FRAMES

How to make and target all kinds of frames

TABLES AND MENUS

How to make tables and menus

FONTS AND HEADLINES

Make your page look its best with a unique font

CGI AND PERL

A basic introduction to cgi and perl

CARTOON DOLLS

Dollmaking tutorials and generators

MUSIC

Here's how to include music and sound on your webpage!

OTHER NEAT STUFF

Great tips and things to try!

© 1998-2004 by Alexandra Thelin