Transparency mangles images in IE

**tarsus** · 07-15-2008 11:48 AM

After a very, very long process of elimination, I discovered that a problem I'm having with image artifacting in a script I'm writing is related simply to style rules. I'm adjusting the opacity of an image with the properties "opacity" (for standards compliant) and "filter:alpha(opacity=x)" (for IE). Here's the IE-relevant code:

HTML Code:

<head>
<style type="text/css">
#transparent {
	filter:alpha(opacity=60);
}
</style>
</head>
<body>
<img id="transparent" src="image.jpg" /><br />
</body>

View the example at this link and you'll see what problem this is creating in IE:
http://tarsus.freehostia.com/image_test.html
(For certain in IE6, but I believe it's happening in IE7 too.) I chose an image that gets particularly mangled, but this happens to some degree with any fairly dark image.

My JavaScript uses these style rules to accomplish a fading in/fading out effect. I've put a band-aid on the problem by setting both rules to an empty string when fading in is finished, so the image looks fine when not fading. But, of course, during the fade the artifacting is there.

Anyone have an idea how to fix this?

**WebJoel** · 07-15-2008 01:26 PM

yeah, -pixelates in IE7 too..

Maybe some along the lines of:

HTML Code:

#transparent { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagePATH/imageNAME.jpg’,sizingMethod=’scale’);
}

What image program are you using? Was the image saved using 'for web' colors?

Note "path/imageNAME.jpg" as "src=' ' "

**tarsus** · 07-15-2008 02:19 PM

Don't know about how it was saved - just grabbed that one off the Internet. However, I can't rely on images being saved in a specific way (that is, if it can be helped!), because I'm designing this script to be very, very versatile. It's designed to allow a user to simply dump any number of images, any format, any size, into a directory, and the script will transform all images in that directory into an interactive slideshow.

I gave it a try, but I'm afraid I have little experience with using this style property and am not sure how you mean it to be incorporated. How do I also use the filter property to specify the opacity? This is what I tried:

HTML Code:

<head>
<title>Image Test</title>
<style type="text/css">
#transparent {   
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dark-knight.jpg',sizingMethod='scale'):alpha(opacity=60);
}
</style>
</head>
<body>
<img id="transparent" src="dark-knight.jpg" />
</body>

And I also tried:

HTML Code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dark-knight.jpg',sizingMethod='scale',opacity=60);

But I'm not at all sure I'm using that right.

**tarsus** · 07-15-2008 05:01 PM

Some research showed me that more than one filter is applied simply with whitespace between:

HTML Code:

filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dark-knight.jpg',sizingMethod='scale');

Or the full alpha filter:

HTML Code:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dark-knight.jpg',sizingMethod='scale');

No luck. As long as the alpha filter is on, the image gets ruined.

What's amazing to me is that this doesn't happen all the time for any developer using transparency on an image. The other images I'm working with aren't nearly as bad as this one, but there are noticeable scattered specks on many of them. These are images I grabbed from many different places on the web, just for testing purposes, so the problem can't be isolated to an issue with saving the images. No one has run into this before?

Thread: Transparency mangles images in IE

Thread Tools

Display

Transparency mangles images in IE

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions