New method for applying AlphaImageLoader in IE6

Joined: 11/28/2008

Hi all,

For a while now, I've been toying with the idea of combining CSS expressions with the AlphaImageLoader filter to automate the application of said filter to <img> tags. I spent a bit of time on Sunday and threw together a test for this, and it seems to work. You can see it at http://mrdos.swifthost.net/autopng/.

I think at least two pros to this approach are obvious:

  • Conciseness and brevity: While other automated methods use a loop to cycle through eligible elements, this method relies on the CSS parser to handle that, meaning it both takes less space and is easier to read should modification be required.
  • Ease of use: Other options require the use a JavaScript snippet, whereas, while this is still technically JavaScript, can be placed in the file that holds any other IE6-specific CSS rules you may have.

On the other hand, it has a few cons too:

  • Inflexibility: It will not replace background images. (I'm working on a similar technique to do this, though.)
  • Potentially slow: I have no proof of this, nor have I tested it, but I suspect applying an AlphaImageLoader filter to ever item on the page may cause an overall slowdown on pages with many images. (Can anyone comment on this?)
  • Won't work if JavaScript is disabled: I still have to test this one, but I'm pretty sure CSS expressions are disabled if the client has disabled JavaScript. Obviously, this is no different from other automated solutions, so it's almost a moot point.

Right now, I'm looking for any comments or suggestions. I think it works fairly well, overall - well enough that I'm starting to wonder if I've overlooked something obvious. As I said above, I'm trying to figure out another method that will work for background images.

--- Mr. DOS

Joined: 11/28/2008
Background images

I've just finished the complimentary version which works with background images. It can be seen at http://mrdos.swifthost.net/autopng/background.htm. The advantages are the same, and only the last disadvantage still applies, but another one can be added: as with most other AlphaImageLoader methods, workarounds must be implemented to retain any positioning of the background image, or to ensure that anchors within the element still work.

--- Mr. DOS