September 16, 2000 - HTML+TIME's Beginning and Ending Times | WebReference

September 16, 2000 - HTML+TIME's Beginning and Ending Times

Yehuda Shiran September 16, 2000
HTML+TIME's Beginning and Ending Times
Tips: September 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

You must specify when the HTML element should appear and for how long. You accomplish it by the BEGIN and END element attributes. You can specify the duration of the element with respect to its beginning time, instead of the ending time. You accomplish it by the DUR attribute. BEGIN, END, and DUR have intuitive defaults. If you don't set the BEGIN attribute, an element will begin displaying when the page loads. If you don't specify the END or DUR attributes, it will remains displayed indefinitely.

The following example shows a slide presentation in which each slide appears and disappears on a predefined schedule. Try it. We first specify the time2 default behavior as mytime CLASS:

<STYLE>
  .mytime {behavior: url(#default#time2);}
</STYLE>

The body of the page includes four IMG elements, one for every slide of the presentation. For the first slide, we define only the duration attribute. It will start displaying as soon as the page loads:

<IMG CLASS="mytime" SRC="slide1.gif" DUR="7">

We specify HTML+TIME attributes in seconds. The second slide is designated to begin after 2 seconds, the third slide after 4 seconds, and the fourth slide after 6 seconds. All slides are due to disappear after 7 seconds. Here are the last three slides:

<IMG CLASS="mytime" SRC="slide4.gif" BEGIN="2" DUR="7"><BR>
<IMG CLASS="mytime" SRC="slide5.gif" BEGIN="4" DUR="7">
<IMG CLASS="mytime" SRC="slide6.gif" BEGIN="6" DUR="7">

We use here the time2 behavior. Therefore, you need Internet Explorer 5.5 to display it. It is also the reason why we did not use the "t:" prefix on the HTML+TIME attributes. Had we used the time behavior (instead of time2), we would have had to use t:BEGIN and t:DUR instead of BEGIN and END, respectively. Here is the full listing of this example:

<HTML>
<HEAD>
<TITLE>Simple HTML+TIME Example>/TITLE>
<STYLE>
  .mytime {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<IMG CLASS="mytime" SRC="slide1.gif" DUR="7">
<IMG CLASS="mytime" SRC="slide4.gif" BEGIN="2" DUR="7"><BR>
<IMG CLASS="mytime" SRC="slide5.gif" BEGIN="4" DUR="7">
<IMG CLASS="mytime" SRC="slide6.gif" BEGIN="6" DUR="7">
</BODY>
</HTML>

Learn more about HTML+TIME in Column 67, Introduction to HTML+TIME.