Every web developer knows that develop cross-browsers web applications is a real pain in the ass. To complicate the things a little bit, the change from IE6 to IE7 bring many differences that turn the develop process harder.
One key limitation in the old Internet Explorer 6 (IE6) is the Portable Network graphics (PNG) transparency problem. In this version of IE, pages that contain PNG images with transparent background are shown wrong. The background of the image is shown gray rather than transparent.
To solve this problem Microsoft recommends that web developers use the AlphaImageLoader filter. This is specific IE CSS filter that can be used with images to show the PNG transparency. The filter can be used as shown below:
<html>
<head>Show PNG transparency in IE6</head>
<body style=”background-color:#FFFFFF;”>
<!– Div that handles the transparent image –>
<div style=”height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
src=’image.png’, sizingMethod=scale);” >
</div>
</body>
</html>
AlphaImageLoader has two parameters, the src and the sizingMethod. The first one is used to set the source image file to be filtered and the second one is used to set the sizing behavior that the object and the image have. The sizingMethod can take three values:
crop – Clips the image to fit the dimensions of the object;
image – Default. The object fits the dimensions of the image;
scale – The images changes its size to fill the object;
This CSS filter can be used as an object in JavaScript. This way, there is another property called enabled to set or disable the filter.
Form more information about AlphaImageLoader filter check MSDN website.