asked on

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--

thx,
Eric

pnoeric

ASKER

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.

VirusMinus

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

ASKER CERTIFIED SOLUTION

mreuring

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pnoeric

ASKER

mreuring, that was it exactly-- thank you.