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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

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, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji