DHTML Analogue Clock


		Home \| Community \| Developer's Paradise \| Jobs User Groups \| Site Tools \| Site Information \| Search

Main Menu

DHTML Analogue Clock

-DHTML Analogue Clock
-The Code
-Discuss this Article

Categories
Client User Group
Internet Explorer
Language
JavaScript
Product
IE5
Task
Fun Stuff, Image Manipulation
Technology
Dynamic Style

Sponsored Links

Inside Technique : DHTML Analogue Clock
By Jon Perry

This article explains the principles involved in my DHTML Analogue Clock program.
(See Demo - IE5 Only).

The basic idea of the program is to use DHTML Expressions. DHTML Expressions allow an expression to be assigned to a style for an object. Whenever a variable contained by the expression is changed, the value of the expression changes, and therefore so does the value of the style.

For example, if we use an image, and type:

<IMG 
   SRC="xyz.jpg" 
   style="position:absolute;left:100;height:expression(x)">

then the image will always be absolutely positioned, and 100 pixels from the left of the browser. The height of the image is governed by the current value of x.

So, adding an event handler to the code, say:

<IMG 
   SRC="xyz.jpg" 
   onclick="x=Math.floor(Math.random()*300);" 
   style="position:absolute;left:100;top:expression(x)">

which ONLY changes the variable x, also changes the height of the image when the image is clicked.

FULL CODE
The full code needs slightly more attention, namely a <SCRIPT> element which also initializes x.

<HTML>
  <HEAD>
    <TITLE>Elevator Image</TITLE>
    <SCRIPT>
      x=100;
    </SCRIPT>
  </HEAD>
  <BODY>
    <IMG SRC="xyz.jpg" 
       onclick="x=Math.floor(Math.random()*300);" 
       style="position:absolute;left:100;top:expression(x)">
  </BODY>
</HTML>

Next we walk you through the script used to create the Analogue Clock.

Page 1:DHTML Analogue Clock
Page 2:The Code