Introduction to HTML+TIME: Including an Action | WebReference

Introduction to HTML+TIME: Including an Action


Introduction to HTML+TIME

Including an Action

You can include the TIMEACTION attribute to specify an action you want to be taken while the element is active on the timeline. TIMEACTION can take the following values:

The style value applies the in-line STYLE definition to the element. We took the example from the previous page and added an header that changes its color according to a predefined HTML+TIME timing. The header changes its color after 4 seconds, for a duration of 6 seconds. Try it now. The code is identical to the one listed on the previous page, except for the header addition:

<HTML>
<HEAD>
<TITLE>Simple HTML+TIME Example</TITLE>
<STYLE>
  .mytime {behavior: url(#default#time2);}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="mytime" BEGIN="4" DUR="6" TIMEACTION="style"
 STYLE="color:magenta">Time Action Demo</H1>
<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>

When you specify TIMEACTION="visibility", the element becomes invisible, but still occupies space on the page. When you specify TIMEACTION="display", it causes the page to reflow and reclaim the space emptied by the element that is no longer displayed. We took the above example and added TIMEACTION="display" to all four slides. Try it now. Observe how slides change their location after previous slides disappear and make room for each other. Here is the complete listing:

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

Next: How to play elements in sequence

https://www.internet.com


Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: August 28, 2000
Revised: August 28, 2000

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