• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 558
  • 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--

thx,
Eric

0
pnoeric
Asked:
pnoeric
  • 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.
0
 
VirusMinusCommented:
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
0
 
mreuringCommented:
Hmmm, try setting it with:
$('element').filters(0).src="/images/new.png";

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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