spacer
Yehuda Shiran September 24, 2000
Playing Elements in Sequence
Tips: September 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Eclipse Helios Update Brings New PHP Tools
Internet Explorer 9 Ups Standards Support
JBoss Portal 5 Release Easier to Use

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.

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


People who read this tip also read these tips:

Look for similar tips by subject:

webref The latest from WebReference.com Browse >
Flashmaps' DynamicLocator: Interactive Maps for Small Areas · Flashmaps' AreaSelector: Interactive Maps for Wide Areas · The DB Mapper: Interactive Street-level Maps of U.S. and Canada
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags