There are 30 different images used ( baby00001.gif, baby0002.gif, baby0003.gif, → ... baby0030.gif))

The duration of the display for each is based in the value of the slider. Each image is displayed for:

   number of milliseconds =

   (duration in seconds from the slider) * 1000 / 30

This number is used as the second parameter in the javascript timer function like this:

   setInterval(function name to execute, number of millseconds)

the setInterval function repeats the named function over and over, waiting number of millseconds before executing the named javascript function again. (See instructions on how to code timers on our syllabus here)

All the images are placed in a div with id="capt" which has style:

      position:relative;

Each of the 30 images has the style property:

      position:absolute;top:0px,left:0px;opacity:0.0;

Thus each image is:

      transparent (opacity=0.0);
      0 pixels from the top of the table cell; and
      0 pixels from the left side of the table cell

The javascript code changes which image is displayed by setting the CSS opacity property to 1.0 to display the image and sets the opacity roperty to 0.0 to hide the image.

This could also have been done three other ways. To "display" or "not display" we could have used:

• the CSS property display:none; and display:inline
• the CSS property visibility:visible; and visibility:hidden;
• the CSS property z-index:2; and z-index:1; [ the z-index of 2 overlays anything with a z-index of 1]

In all the cases, the critical animation aspects are: controlling position; display (using CSS: opacity OR display OR visbility OR z-index) and timing.