Internet Explorer Filters: Transition

Another feature of Internet Explorer enables you to apply a transition when swapping images.

A rollover using Internet Explorer transition filters


We define one more function to produce this effect:

56: function trans(img,nb){
57:   if (Navigateur() == "Explorer") {
58:      img.filters[0].apply();
59:      eval("img.src=a["+nb+"].src");
60:      img.filters[0].play();
61:   } else {
62:      eval("img.src=a["+nb+"].src");
63:   }
64: }

[...]

82: <A HREF="#"
83:    onmouseover="trans(img2,0)"
84:    onmouseout="trans(img2,1)">
85:    <IMG name="img2"
86:       style="filter: revealTrans(Transition=12, Duration=0.35)"
87:     SRC="img1.gif"  BORDER=0 >A rollover with transition in IE, simple in Netscape.
88: </A><br><br>

The call to the function trans() is identical to that of the function roll() seen above. The only differences lie in the function coding.

We first check that we can apply the requested transition. For this, we need to establish that Internet Explorer is used (line 57). We then freeze the display of the image on screen with the filter apply() function (line 58). The images are then swapped (line 59). Nothing has changed on screen yet. Finally, the transition is activated and applied by means of the function play() (line 60), which displays the new image.

For this transition to work, you have to initialise the filter when creating the image (line 86). The Transition attribute value changes the transition type (have a go at testing the various values for yourself), and the Duration attribute value sets the transition length.


All you need to do now is choose your own images for the best effects; after all, they are what it's all about.