FILL Attribute | fill Property | Internet Development Index |
Sets or retrieves the action an element takes if its timeline ends before the timeline on its parent element ends.
The
Syntax
HTML <ELEMENT FILL = sAction... > Scripting object.fill(f) [ = sAction ]
Possible Values
sAction String that specifies or receives one of the following values.
freeze Element will remain in its state at the end of its timeline. The effective end of the element is dependent on the parent time container type. In a t:PAR container, the element ends when the t:PAR ends. In a t:SEQ or an t:EXCL container, the element ends when the next element begins. hold Element will remain in its state at the end of its timeline until the end of the parent time container, regardless of the parent time container type. remove Element will not extend past the end of its timeline. transition Internet Explorer 6 and later. Element will remain in its state at the end of its timeline. The effective end of the element is dependent upon the subsequent transition of an overlapping element. The element ends when the overlapping element's transition ends. An element with a value of transition will only work appropriately when the following conditions are met:
- The element is inside of a t:SEQ or t:PAR element.
- The t:TRANSITIONFILTER is a child of the element to be transitioned.
- The parent element of the t:TRANSITIONFILTER must have a TIMECONTAINER attribute value of par.
- t:AUTOREVERSE is not used on the t:TRANSITIONFILTER element.
- The elements overlap in layout. It is currently possible for the elements not to overlap and a value of transition to have an effect. However, this should not be done because later versions of Internet Explorer may not support this behavior.
The property is read/write. The property has no default value.
Remarks
If an element is a time container (t:SEQ, for example), then the default value is remove.
If an element is not a time container and specifies a DUR, END, REPEATDUR, or REPEATCOUNT, then the default value is remove.
If an element is not a time container and does not specify any of the above four attributes, then the default value is freeze.
This property supersedes the endHold property.
Examples
This example uses the fill attribute to set the action taken by the element when its timeline ends before the timeline of its parent element ends.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <TITLE>fill Property</TITLE> <?IMPORT namespace="t" implementation="#default#time2"> <STYLE> .time{ behavior: url(#default#time2);} </STYLE> </HEAD> <BODY> <t:excl id="t1" begin="0" DUR="15"> <DIV ID="div1" class="time" BEGIN="0" DUR="10" fill="freeze"> This text has a duration of 10 seconds, but the time container has a duration of 15 seconds. This text will be displayed beyond its timeline until the timeline of its parent element ends. </DIV> </t:excl> </BODY> </HTML>This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.The example below demonstrates setting the FILL attribute to transition. Because the first and second images have the FILL attribute set to transition, the first image will be visible while the second image transitions in and the second image will be visible as the third image transitions in.
<HTML XMLNS:t = "urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?import namespace = t urn = "urn:schemas-microsoft-com:time" implementation = "#default#time2" /> </HEAD> <BODY> <DIV STYLE="height:100px"> <t:SEQ REPEATCOUNT="indefinite" > <t:MEDIA STYLE="position:absolute;" src = "onepic.jpg" DUR="3" TIMECONTAINER="par" FILL="transition" > <t:TRANSITIONFILTER TYPE="fade" DUR="2"/> </t:MEDIA> <t:MEDIA STYLE="position:absolute;" SRC = "twopic.jpg" DUR="3" TIMECONTAINER="par" FILL="transition" > <t:TRANSITIONFILTER TYPE="ClockWipe" DUR="2"/> </t:MEDIA> <t:MEDIA STYLE="position:absolute;" SRC = "threepic.jpg" DUR="3" TIMECONTAINER="par" > <t:TRANSITIONFILTER TYPE="barnDoorWipe" DUR="2"/> </t:MEDIA> </t:SEQ> </DIV> </BODY> </HTML>This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
This property is defined in Synchronized Multimedia Integration Language (SMIL) 2.0
.
Applies To
t:ANIMATE, t:ANIMATECOLOR, t:ANIMATEMOTION, t:ANIMATION, t:AUDIO, t:IMG, t:MEDIA, t:PAR, t:REF, t:SEQ, t:SET, time2, t:VIDEO
See Also
Introduction to HTML+TIME