Replacing PNG images with transparent background in Internet Explorer

Question

image1.png and image2.png are both with transparent background.

<script type="text/javascript">
    $(document).ready(function(){
        $("img#test").click(function() {
            $(this).attr("src", "image2.png");
        });
    });
</script>
<img id="test" src="image1.png">

The above code is supposed to replace image1.png with image2.png. But in Internet Explorer 6/7/8 (Compatibility View off), it wont clear image1.png from background but just lay image2.png over image1.png.

How to dynamically remove image1.png from background completely before replacing with image2.png?

EDIT

I used the following code in base.css to fix bugs in displaying tranparent .png image in Internet Explorer.

/* Png Ransparent */

.mypng img {

azimuth: expression(

this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",

this.src = "/static/images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),

this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",

this.runtimeStyle.backgroundImage = "none")),this.pngSet=true);

}

Is that the cause of this problem?

Answer 1

You can try with $(this).after(); and add a new image after the one you want to substitute; and finally do $(this).remove();

Answer 2

After replaced .png fix code with DD_belatedPNG, the former code works.