Swap PNGs using JavaScript - with IE6 PNG hack!

Posted on 2007-08-05
Last Modified: 2013-11-19
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 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--


Question by:pnoeric

    Author Comment

    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.
    LVL 30

    Expert Comment

    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.

    LVL 17

    Accepted Solution

    Hmmm, try setting it with:

    No garanties, but it oughta work :) (asuming of course you're only using 1 filter)

    Author Comment

    mreuring, that was it exactly-- thank you.

    Featured Post

    Courses: Start Training Online With Pros, Today

    Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

    Join & Write a Comment

    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now