PNG in Windows IE: Mouseover Demo

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

This page is a variation on the original PNG fix. It could be useful if you need tranparent PNGs in mouseover image swaps. You may have seen a flicker on page load, as this code is called inline and does not use the 'include file and defer keyword' method. You can of course hack such a file yourself to get rid of the flicker.

The images below should change colour as you direct the mouse on and off them. This effect can be achieved in many ways; I have chosen to implement it here with the function imgSwap() which toggles any image named "foo_off.bar" with one named "foo_on.bar".

This should work fine in all modern JS-supporting browsers. However, the standard PNG fix function converts PNGs to spans, thus breaking image-swap functions like the one above. This page therefore contains a modified PNG fix function with an additional PNG swap function. Check out the source.

Note that the PNGswap() function is only called by IE 5.5 and 6. Other browsers use the standard imgSwap() function. You can hack and slash to suit. Note also that each PNG must have an ID attribute for this to work.