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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business