fill property
Sets or gets the action taken by an element if the element timeline ends before the timeline on its parent element ends.
Syntax
| JScript |
|---|
|
Property values
Type: String
One of the values in the Property Values section.
Remarks
If an element is a time container, for example, t:SEQ, then the default value is remove.
If an element is not a time container, and the element specifies DUR, END, REPEATDUR, or REPEATCOUNT, then the default value is remove.
If an element is not a time container and it does not specify any of the preceding four attributes, then the default value is freeze.
This property supersedes the endHold property.
In Internet Explorer 6, the fill property supports transition as a possible value.
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.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/fill.htm
<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>
The following example demonstrates setting the FILL attribute to transition. Because the FILL attribute is set to transition on the first image and the second image, the first image is visible while the second image transitions in, and the second image is visible as the third image transitions in.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/fillEX1.html
<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>