• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 561
  • Last Modified:

Swap PNGs using JavaScript - with IE6 PNG hack!

Hi, I have a div with a transparent PNGs background. To make this work in IE6,I'm using the Microsoft filter:progID hack, and that is fine.

Here's my CSS code:

#element {
      background: url(/images/old.png) no-repeat;

/* this next part is only parsed by IE6 */
* html #element {
      background-image: none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/old.png", sizingMethod="crop");

And again, that code all works perfectly.

I now need to have Javascript change the div's background PNG on the fly. (I'm using script.aculo.us to make it a little easier.)

Doing this in Firefox is no problem... I just do a simple:

  $('element').style.background= 'url(/images/new.png)';
However, how can I do this with IE6? I tried:

  $('element').style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/new.png", sizingMethod="crop")';

With no luck. Ugh.

Any advice welcome--


  • 2
1 Solution
pnoericAuthor Commented:
Wait, let me guess, I need to make individual layers for every background PNG, and then just change their display to block or none... right? :-) I'd do that except I have about 48 different PNGs that need to drop in there. So I'd really like to be able to just swap it directly... if it's possible.
to apply filters to elements in IE you need the element to have 'layout' i.e. it needs to have a width or height specified.

if you don't know the dimensions beforehand then just try adding height:1% to the element's CSS.

ref: http://jszen.blogspot.com/2005/04/ie6-opacity-filter-caveat.html
Hmmm, try setting it with:

No garanties, but it oughta work :) (asuming of course you're only using 1 filter)
pnoericAuthor Commented:
mreuring, that was it exactly-- thank you.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now