spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column67


Introduction to HTML+TIME

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

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:

  • style
  • display
  • visibility

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

http://www.internet.com

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


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

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