1 Reply Latest reply on Jan 30, 2010 5:26 AM by jyeager11

    "DXImageTransform.Microsoft.Alpha" won't affect PNGs in IE... why?

    jyeager11 Level 1

      I've been using IEPNGFIX.HTC to fix PNG support on IE... which probably no longer requires it (honestly, I'm just too lazy to take it out of my new website template to find out).

       

      However, I do know one thing... PNGs with alpha channels (ie, gradients to transparency, like a drop shadow) do not seem to react to the following code :

       

      a.opacity {
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
          opacity: 1;
          -moz-opacity: 1;
      }
      a.opacity:hover {
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
          opacity: 0.8;
          -moz-opacity: 0.8;
      }

       

      What this does -- with everything EXCEPT png's in IE -- is make the image go slightly transparent on mouseover for all "a" tags using the class "opacity". These "a" tags have background images.

       

      Sure, I can do an image swap (or position slide) to simulate a hover state, but that would double the filesize of the requested image. Simply playing with opacity does that with a single image.

       

      Works fine with JPGs in both IE and FF.

       

      Works fine with PNGs in FF.

       

      But it won't work with PNGs in IE, even with the popular IEPNGFIX.HTC fix (Google if curious).

       

      Is there anything I can do to fix this?

       

      Thanks.

        • 1. Re: "DXImageTransform.Microsoft.Alpha" won't affect PNGs in IE... why?
          jyeager11 Level 1

          Well, I've fixed part of the problem, by changing :

           

          a.opacity {
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
              opacity: 1;
              -moz-opacity: 1;
          }
          a.opacity:hover {
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
              opacity: 0.8;
              -moz-opacity: 0.8;
          }

           

          To :

           

          a.opacity img {
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
              opacity: 1;
              -moz-opacity: 1;
          }
          a.opacity:hover img {
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
              opacity: 0.8;
              -moz-opacity: 0.8;
          }

           

          In fact, I don't really need the 100% opaque state, do I? So the code then becomes simply :

          a.opacity:hover img {
              filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
              opacity: 0.8;
              -moz-opacity: 0.8;
          }

          Meaning all images with an "a" tag set to class "opacity" will go 80% transparent on mouseover.

           

          Only bug left to resolve : in IE, it will apply an 80% opacity in every pixel, regardless of whether that pixel was 50% transparent, 10%, or 90% before the mouseover. All it will recognize and leave alone is 100% transparency. In other words, it will "flatten" the alpha channel values to one of two settings for every pixel : 100% transparent, or the setting specified.

           

          Sort of like a GIF. If you try to apply an opacity filter on a PNG with different values of transparency in it (such as a fading shadow) all those pixels except the 100% transparent ones will be set to one single opacity value (the one specified in the css).

           

          This means whatever anti-aliasing is being done on PNG text gets stripped.

           

          Perhaps I should start a new thread on this topic and close this one.