How to Apply a Transition on an Image

Transitions are one of the cool new features Dynamic HTML brings to the Internet. With transitions, Web designers can implement fast and easy visual effects on their Web pages with simple HTML and very minimal script code. Transitions are particularly useful in slide show presentations to move from one slide to the next (also called interpage transitions in Dynamic HTML), or to progressively render a graphic image on a page for a more subtle effect.

This article demonstrates how to implement a simple transition on an image. Although the sample uses a reveal transition, the technique described applies to the blend transition as well. The applyTransition function described in the following example should be generic enough to implement any desired transition in your own application.

To better understand transitions in Microsoft® Internet Explorer 4.0, see Transitions.

The following steps outline how to apply a transition on an image:

Define the image, specifying the desired transition.
The reveal transition filter is applied inline to the IMG control through the cascading style sheets (CSS) filter attribute. In the code below, the parameter specified for the revealTrans method uses the box out transition (or Transition=1), and it takes three seconds to play.
In addition, two attributes must be specified in preparation for Step 2:
- The ID attribute needs to be set to refer to this image element in script.
- The CSS visibility attribute needs to be set to "hidden" initially, so the image transitions from being invisible to visible.
```
<IMG ID="MyImg" src="images/pdc97.jpg" 
    STYLE="filter:revealTrans(Duration=3.0, Transition=1); visibility:hidden">
```
While this article demonstrates how to apply transitions on images, it's important to mention that transitions are not limited only to images. They can be applied to text as well. When applying transitions on text, usually a DIV or a SPAN block is defined so that the filter attribute can be specified inline. When using DIV or SPAN with transitions, be sure to specify one of height, width, or position:absolute or the filter will not be recognized as an object, resulting in a scripting error.
The following code example illustrates all necessary attributes to specify in a SPAN object to successfully apply a transition on a text block.
```
<SPAN id=MyText style="width:250; 
    visibility:hidden;  filter:revealTrans(transition=5,duration=5)">
        It is quite easy to add visual flair to a page by using transitions. 
        First, set the revealTrans filter on the style sheet for the object
    being transitioned.
        Next, use the apply method to stop changes from being drawn.
        Now, change whatever things you want to change.
        Finally, use the play method to transition to those changes.
</SPAN>
```
Write a function to start the transition.
Causing the transition to take effect is a three-step process:
- First, apply the transition, without causing an immediate repaint, by using the apply method.
- Second, make the necessary changes.
  In the sample below, the image transitions from being invisible to visible, so the visibility property of the IMG object is set to "visible". This is not always the case, however. In other instances, the image transitions into another image, thus the src property of the IMG object is set to the URL of the new image to be transitioned to.
- Third, complete the transition by using the play method.
  Note how the filter attribute defined for the IMG object in Step 1 is accessed through script by using the filters collection of the IMG object (in this case, MyImg). The filters collection returns all the filters defined for that element. Therefore, to access the first and only filter defined in the sample, use the following syntax (where 0 is the zero-based index):
```
MyImg.filters[0]
```
These three steps have been encapsulated into the applyTransition function that takes the image object to be transitioned as a parameter.
```
<SCRIPT>
function applyTransition (oImg)
{
    oImg.filters[0].Apply();
    oImg.style.visibility = "visible";
    oImg.filters[0].Play();
}
</SCRIPT>
```
Finally, call the function.
This particular sample starts the transition as soon as the page loads, and thus calls the applyTransition function on its onload event. Note how the pointer to the object MyImg is passed to the function—with no quotation marks. Incorrectly enclosing it in quotation marks, as in "MyImg", results in the string "MyImg" being passed instead of the MyImg object. Therefore, no transition takes place.
A page that uses transitions for an animated sequence, for instance, would call the applyTransition function on a timer event or on a mouse event, depending on how the animation is implemented. The Timer-Driven Animation Sequence sample illustrates this.
```
<BODY onload="applyTransition(MyImg)" ... >
    :
    :
</BODY>
```
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The following links provide more information for implementing transitions in your application.