Introduction to HTML+TIME: Playing Elements in Sequence

Introduction to HTML+TIME

Playing Elements in Sequence

You can group HTML elements by wrapping them in an HTML container like the DIV element. You can then apply HTML+TIME attributes to the whole group. One attribute is TIMELINE="seq" which instructs the browser to play members of the group one after the other. According to Microsoft, one would think that the following code should work:

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

But it doesn't. The trick is to replace the TIMELINE attribute with the TIMECONTAINER attribute. Try it now. Here is the code:

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

Notice that because of the TIMECONAINER="seq" attribute, only one slide is displayed at a time. They all show up at the top left corner because of the attribute TIMEACTION="display" which forces a reflowing of the page each time an element disappears.

Sequencing a group of HTML elements can also be accomplished by the newly-created HTML+TIME element, t:SEQ. You have to define the t XML namespace in the HEAD section:

<XML:NAMESPACE PREFIX="t"/>

Try it now. You get the same results as above. Here is the full listing:

<HTML>
<HEAD>
  <XML:NAMESPACE PREFIX="t"/>
<TITLE>Simple HTML+TIME Example</TITLE>
<STYLE>
  .mytime {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<t:SEQ CLASS="mytime">
  <IMG CLASS="mytime" SRC="slide1.gif" DUR="5"
   TIMEACTION="display">
  <IMG CLASS="mytime" SRC="slide4.gif" DUR="5"
   TIMEACTION="display">
  <IMG CLASS="mytime" SRC="slide5.gif" DUR="5"
   TIMEACTION="display">
  <IMG CLASS="mytime" SRC="slide6.gif" DUR="5"
   TIMEACTION="display">
</t:SEQ>
</BODY>
</HTML>

You can use the TIMELINE attribute (instead of the TIMECONTAINER attribute) with the time behavior, as opposed to the time2 behavior. Remember, when using the time behavior, you have to prefix HTML+TIME attributes with "t:". The following example not only differs in using time instead of time2, it also does not use TIMEACTION="display". As a result, there is no reflowing of the page, and each slide appears in its original position, covering all four quadrants. Try it now. Here is the full listing:

<HTML>
<HEAD>
<STYLE>
  .mytime {behavior: url(#default#time);}
</STYLE>
</HEAD>
<DIV CLASS="mytime" t:TIMELINE="seq">
    <IMG SRC="slide1.gif" CLASS="mytime" t:DUR="2">
    <IMG SRC="slide4.gif" CLASS="mytime" t:DUR="2"><BR>
    <IMG SRC="slide5.gif" CLASS="mytime" t:DUR="2">
    <IMG SRC="slide6.gif" CLASS="mytime" t:DUR="2">
</DIV>
</BODY>
</HTML>

Next: How to play elements in parallel

URL: https://www.webreference.com/js/column67/6.html

Introduction to HTML+TIME: Playing Elements in Sequence

Introduction to HTML+TIME

Playing Elements in Sequence

Find a programming school near you