Javascript document.write() - Replace PNG with GIF?!

Question

The Scenario

I have an asp.net web application with a HTML/CSS front end. This all works fine but in Internet Explorer 6, the transparent PNG's that I use within the site are not transparent due to the poor design of this particular browser.

Solutions Attempted

I've already attempted various IE6 PNG Transparency fixes that didn't work.

The Proposed Solution

I thought about using GIF Image replacements for when the website detects that the browser is IE6. I don't have any javascript experience but someone has mentioned that I could use the "document.write()" feature off javascript to replace the PNG's with GIF's of the same image when using IE6 as the browser.

The Question

Please could someone explain to me how I would go about doing this? Baring in mind I have an understanding of C# etc. but no javascript knowledge. I'm only just starting out as a web developer so simple explanations would aid me greatly.

Thanks for the help. Regards.

Answer 1

Let's say your img element has an id="my_img"

To detect if browser is IE6, use conditional comments. Further, add Javascript like this:

<!--[if IE 6]>
  <script>
    document.getElementById("my_img").src = "images/alternate.gif"
  </script>
<![endif]-->

You might also like to have a look at this: http://stackoverflow.com/questions/697682/ie6-png-transparency

Answer 2

Have you tried jQuery's pngFix? It makes the PNG transparent for IE 6 and you don't need to maintain two sets of images (PNG and GIF).

Using it doesn't require much javascript knowledge, so it wouldn't hurt to take a look at it.

Answer 3

Hi Judi,

W3Schools is a great place to start if you're wanting to learn javascript. For example, take a look at the getElementsByTagName function...

There is also a browser detect function here

Good luck - hope that helps.

Answer 4

If we assume that

a) the gif files will have the same name and,

b) they already exist (you're not looking for some gif creator).

Then you just need to replace the src attribute for these files. This would be done onload, and doesn't require document.write(). Go with:

<!--[if lte IE 6]>
<script type="text/javascript">

    window.onload = function() {

        var images = document.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

            var image_png_src = images[i].src;
            var image_gif_src = image_png_src.replace(".png", ".gif");
            images[i].src = image_gif_src;
        }
    };
</script>
-->

The nice thing about the above method is that it doesn't have to check if it's gif or png or jpg every time, because it simply won't replace it with .gif unless there is a .png. The bad thing is that if, for some reason, you have an image with .png in it (and I can't imagine why) but it isn't the file extension, it would replace that bit with .gif.

Hope that helps.

Answer 5

Here is the code runs a replace on IE6 only:

window.onload = function() {
    if(navigator.userAgent.match(/MSIE 6/) != null)) {
    var images = document.getElementByTagName("img");
       for (var i = 0; i < images.length; i++) {
          var src = images[i];
          if(src.match(/\.png$/)){ //endswith .png
             images[i].src = src.replace(/\.png$/g,'.gif');
          }
       }
    }
};

Answer 6

jQuery version of the replacement:

$(document).ready(function()
{
    // List all PNG images
    $("img[src$=.png]").each(function(i, img)
    {
        // Replace with GIF versions
        img.src = img.src.replace(/\.png$/, '.gif')
    });
});