Menu
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:
[code=html]<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:
[url]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?