Last night i was working on a site that uses a lot of transparent .png’s . As we all know, our dear MS IE 6 doesn’t know how to handle the transparency of PNG files.

For quite a while, i was using a Javascript png fix called SUPERSLEIGHT and i was very happy about how it worked.

But last night i came into a problem. I needed to make some rollover images which were transparent PNG’s, and when the images change, the transparency fix will break. So i started looking for a solution and i came over this function, which works perfect. The only thing was that this won`t work togheter with the original SUPERSLEIGHT script and it only fixes the png`s in IMG tags, and i had a lot of PNG images as backgrounds, inputs, etc.

So i changed the supersleight script to ignore PNG`s in IMG tags, and i merged it with the other script.

How it works :

- Link the ’supersleight-swap.js’ file into your document inside conditional comments so that it is delivered to only Internet Explorer 6 or older.

<!--[if lte IE 6]>
	<script type="text/javascript" src="path/to/supersleight-swap.js"></script>
<![endif]-->

- Copy ‘x.gif’ in the same directory as the page you’re using PNG’s on.

- Put in the function that swaps the images (for NORMAL browsers) :

function imgSwap(oImg)
{
   var strOver  = "_on"    // image to be used with mouse over
   var strOff = "_off"     // normal image
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1)
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}

- Call the function in the ‘onmouseover’ and ‘onmouseout’ event of the IMG.

<img alt="a png image" src="path/to/image_off.png" onmouseover="imgSwap(this)" onmouseout="imgSwap(this)" id="img1">

Note that each PNG must have an ID attribute for this to work.

Tags: fix, ie6, javascript, png, transparency