PNG in Windows IE: Imagemaps & Image Inputs

Home | The Problem | The Solution | How To Use | More Info

PNGs used for imagemaps and form inputs are a special case. The basic pngfix does not work with them, but there is a fix. The downside is that you need an extra file; a single pixel transparent gif. You can save this one to use for yourself.

The special case version of the JS include file for this page is called pngfix_map.js which you can also download.

Place both files in your webpage directory, then add the following construct somewhere in the <head> section:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix_map.js"></script>
<![endif]-->

Note the use of the defer keyword. You can view the source on this page to see it in action. This method still repairs all regular PNGs on the page as before, but it also lets you use PNGs in imagemaps and as inputs on forms.

I didn't include this in the regular pngfix because (i) it requires the extra GIF and (ii) it adds more code. If you don't need imagemaps or image inputs, then use the regular fix.

Try mouseing over the car image below. There should be three mapped links.

Now check out a form input image using a PNG: Enter something in the box then click the logo to submit the form. It's shown against a green/white background to demonstrate working transparency.