Internet Explorer Filters: Transparency

The next two effects we are about to look at are only compatible with Internet Explorer as they call on a specific feature of this browser: filters. The first effect plays with the image transparency.

A rollover using Internet Explorer transparency filters

This rollover effect needs only one image:

66: function makevisible(img,flag){
67: if (flag==0) img.filters.alpha.opacity=100
68: else img.filters.alpha.opacity=50
69: }

[...]

89: <A HREF="#"
90:    onMouseover="makevisible(img3,0)"
91:    onMouseout="makevisible(img3,1)">
92:    <IMG SRC="img1.gif" NAME="img3" BORDER="0" style="filter:alpha(opacity=50)">
93:    A rollover with Opacity, works with Internet Explorer only<BR>
94: </A><br><br>

We use a function makevisible() (lines 66 to 69) to change the transparency value of our image. It simply changes the filters.alpha.opacity attribute value and makes the image completely opaque (value 100) or semi-transparent (value 50).

This function is used in the same way as the function roll() we defined previously (lines 90 and 91). In this case, the second argument passed during the call helps to choose the transparency level: no transparency at all (value 0) or transparent (value 1). For the image to appear transparent as soon as the page loads, the filter is immediately applied (line 92) via the style attribute.