[EMAIL PROTECTED] wrote:
> I've tried on various occasions to use the AlphaImageLoader filter to
> get IE to properly display PNGs with alpha transparency... though I'm
> never really successful. What I want to do is display those PNGs as
> regular images, not as background-image. Is it possible? Or does the
> AlphaImageLoader do it's thing by rendering an image as a background-
> image? If I apply the AlphaImageLoader filter directly to an <img>
> tag, will it enable IE to properly display the PNG, or will it simply
> invalidate the xHTML and break the image for all other browsers (or
> both)?
>
Hi,
The AlphaImageLoader will work on an image, but as you surmise it
functions rather like a background, with the result that the image still
appears in front of it complete with the nasty grey that replaces the
transparency in IE. One method you can use is to wrap the image in some
additional element such as a span with class "pngWrapper" and use the
following CSS to make the image fully transparent to IE, and the correct
rendering will show through:
CSS:
.pngWrapper {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='anImage.png',sizingMethod='scale');
}
.pngWrapper img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
XHTML:
<span class="pngWrapper">
<img src="anImage.png" alt="An example image" />
</span>
If your image is in a link then you don't need the span as you can apply
the class to the <a> instead, but you'll have to add "cursor: hand;" to
the rules for .pngWrapper to make IE change the cursor when the mouse
pointer hovers over it.
Note that this method will fail for users who have all ActiveX disabled
in their browser, but I don't think that's a common enough setting to be
too concerned about; those users will be used to seeing a lot of
breakage around the web anyway and probably won't get too mad. In
addition it doesn't work in IE5, although IE5.5 is OK with it.
There are various solutions which apply this lot via a behaviour (a .htc
file), but that will fail if JavaScript is disabled. To keep your main
CSS minty-fresh and valid, you should keep the above CSS in a separate
file, linked within an IE conditional comment:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href"ie-win-fixes.css">
<![endif]-->
HTH,
Nick.
--
Nick Fitzsimons
http://www.nickfitz.co.uk/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
