Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

Manipulating the Fade filter in JavaScript

After the "Fade" filter has been defined on an object, that in itself produces no effect. To play the effect, scripting is required. Lets start with the lovely image again from the previous page:

<img id="myimage" src="myimage.gif" style="filter:progid:DXImageTransform.Microsoft.Fade(Duration=3)" />

To access the above image's "Fade" filter in JavaScript, we access the "filters" collection first, then the desired filter based on its position in the filters collection. For an object with just one filter applied, this is always filters[0]: 

<script type="text/javascript">
if (document.getElementById("myimage").filters) //if browser supports IE filters and it is defined on the object
document.getElementById("myimage").filters[0] //access the first filter within object, in this case, the Fade filter
</script>

In the above, notice how I test for object support before proceeding, so browsers such as Firefox do not trip up. Ok, now that you know how to access the "Fade" object of the image, it's time to learn about the various properties and methods of this object:

Properties of the Fade filter
method description
Duration Sets/ retrieves the length of time in seconds the transition takes to complete. Attribute: duration.
Enabled Boolean that sets or retrieves the state of the transition (either enable or disable it). Attribute: enabled.
status Integer that returns the status of the transition:
  • 0: Transition has stopped.
  • 1: Transition has been applied.
  • 2: Transition is playing.

Methods of the Fade filter
method description
apply() Saves the current state of the image to use the transition effect on.
play() Invokes and plays the fade-in effect on the saved state of the image, fading to a new one.
stop() Stops the transition from playing.

The basic procedure to applying and playing the "Fade" filter on any object is very logical- first call apply() to save the current state of the object just before the filter is played, then use play() to play it! Here are two examples that should explain the whole concept nicely:

Example 1: Fading onto itself:

Fade text to view

<script type="text/javascript">
function fadetoview(objname){
var objholder=document.getElementById(objname)
objholder.filters[0].apply()
objholder.style.visibility="visible"
objholder.filters[0].play()
}
</script>

<div id="sometext" style="visibility: hidden; width: 300px; font: normal 16px Arial; filter:progid:DXImageTransform.Microsoft.Fade(duration=2)">JavaScript kit</div>
<a href="javascript: fadetoview('sometext')">Fade text to view</a>

Lets break down the three lines of codes in red to explain in detail what the heck is going on.

The first line:

objholder.filters[0].apply()

accesses the "Fade" filter of the object and calls the apply() method to save the current object state (of being "hidden"). This is necessary so that IE knows the initial state of the object in which to fade the object using.

The second line

objholder.style.visibility="visible"

then tells IE the post state of the object we want it to be in after the Fade filter has been run.

And finally, the third line
objholder.filters[0].play()

plays the Fade filter, thus creating the fade-in effect. The sequence of the three lines of code above is important relative to one another.

Example 2: Fading into another object:

To fade from one object to another is really no different. The below example fades from one image to another:

<img src="image1.gif" id="someimage" border=0 style="filter:progid:DXImageTransform.Microsoft.Fade(duration=3)" width="97" height="100" />

<form><input type="button" value="play >>" onClick="fadeimg('someimage')"></form>

<script type="text/javascript">
function fadeimg(objname){
var objholder=document.getElementById(objname)
objholder.filters[0].apply()
objholder.src=src="image2.gif"
objholder.filters[0].play()
}
</script>

Here the only difference in that I set the object's src to a different image, switching from one object to another as the "Fade" filter is played.

You basically now know how to create a Fade-in image slideshow! Lets see how such a slideshow looks like.