spacer

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

home / experts / javascript / column67


Introduction to HTML+TIME

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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