www.webdeveloper.com
Results 1 to 4 of 4

Thread: Transparency mangles images in IE

  1. #1
    Join Date
    Mar 2005
    Posts
    250

    Transparency mangles images in IE

    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?

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    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=' ' "
    Last edited by WebJoel; 07-15-2008 at 01:29 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Mar 2005
    Posts
    250
    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.
    Last edited by tarsus; 07-15-2008 at 02:22 PM.

  4. #4
    Join Date
    Mar 2005
    Posts
    250
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles