|
Custom Clock
Here is an example of what we will be making:
This tutorial requires knowledge of your graphic program, and also basic html knowledge.
Okay, on to the work!
You will need the following programs:
- Any graphics program (i.e. Paint, Photoshop, Paint Shop Pro)
- Notepad
- Winzip, winrar or any other unzipping program
What we basically are going to do, is to draw a background image, and the stick the clock digits to the top of this image. It is very important that you follow all steps of this tutorial.
1. Download THIS .rar-file.
2. Open clock_01.gif in your graphics program
This file is just an example of what the backgroundimage of the clock could look like.
Create your own backgroundimage using your graphic program, any size you want your clock to be (you can even animate the image if you want to, transparency is also no problem!), and overwrite the existing clock_01.gif file.
3. Open clock_01.htm in Notepad
Edit yoururl.com to your own url (i.e. turtlebug.net) in the following line:
<img border="0" src="http://www.yoururl.com/clock/clock_01.gif">
Edit the numbers 2 and 2, to the position where you want the numbers of the counter to appear in your image (left is the number of pixels from the left in your image, top is the number of pixels from the top of your image) in the following line:
POSITION: absolute; left: 2px; top:2px;">
Edit font color, face and size of the clockdigits in the following line:
document.write("<FONT color='black' face='verdana' style='font-size : 8px;'>");
Save the changes to clock_01.htm
4. Open clock_01.js in Notepad
Edit width and height to the size of your backgroundimage (size is measured in pixels)
Edit yoururl.com to your own url
Save the changes to clock_01.js
5. Upload the folder, with all files in it, to your webspace.
6. Open the page that you want your clock to appear on in Notepad (i.e. your home.htm page), then copy and paste the following code anywhere you want between the <body> and </body> tags:
Edit yoururl.com to your own url
Save and upload.
7. That's it! You now have your very own custom clock on your website!
 
|