Transparency

You can add some cool transparency effects on your webpages using Microsoft's propritery Alpha filter.

• filter: alpha(Opacity=??, FinishOpacity=??, Style=?, StartX=??, StartY=??, FinishX=??, FinishY=??);

Opacity=??
Sets the opacity of the object. 0 = invisible, 100 = completely visible. Sets the start opacity when used in conjunction with FinishOpacity.

FinishOpacity=??
Sets the opacity for the end of the of the object. Creates a gradient effect.

StartX=??, StartY=??, FinishX=??, FinishY=??
Sets the coordinates for the opacity to start or end.

Style=??
Sets the type of gradient. 1 = Horizontal; 2 = Radial; 3 = Rectangular.

Applies To
BODY, BUTTON, DIV, IMG, INPUT, MARQUEE, SPAN, STYLE, TABLE, TD, TH, TEXTAREA

The Alpha filter works only in Internet Explorer 4.x and above.

Example:

1.	Style = 1
2.	Style = 2
3.	Style = 3
4.

Copy & Paste the following code exactly in the container tag, ie. the tag which containes the text or graphic.
Just replace "navwheel.gif" with your own image.

<P style="FILTER: alpha(finishopacity=0, style=1); WIDTH: 120px; COLOR: #ffffff"
align="middle" width="120" bgColor="#808080">Style = 1</P>

<P style="FILTER: alpha(finishopacity=0, style=2); WIDTH: 120px; COLOR: #ffffff"
align=middle width=120 bgColor=#808080">Style = 2</P>

<P style="FILTER: alpha(finishopacity=0, style=3); WIDTH: 120px; COLOR: #ffffff"
align=middle width=120 bgColor=#808080">Style = 3</P>

<IMG style="FILTER: alpha(finishopacity=0, style=2)" WIDTH="71" HEIGHT="33"
SRC="knight_in_armour.gif" ALT="image transperancy" BORDER="0">

Using the above technique, you can add a mouseover effect on an image. The browser is doing all of work so there is no extra download time. This is a great way to make rollover effects without weighing down your page. Here's how.

Example:

Move the mouse over the image to see a mouseover effect

Copy & Paste the following code exactly in the IMG tag. Just replace "navwheel.gif" with your own image.

<IMG onmouseover="this.filters.alpha.opacity='100' " style="FILTER: alpha(opacity=50)"
onmouseout="this.filters.alpha.opacity='50' " WIDTH="90" HEIGHT="33"
SRC="navwheel.gif" ALT="transperancy mouseover" BORDER="0">