Page 1 of 1

Fix PNG transparency issue for IE 5.5 - 6 A simple and fast method to fix PNG's with 16 bit tansparency on I Rate Topic: -----

#1 BlueVD  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 29
  • Joined: 08-August 05

Posted 29 August 2007 - 09:34 AM

If you ever tried to use transparent PNG images on your site you know the horror. The transparent parts will show up in gray on IE (all versions, except 7). Fortunately, Microsoft introduced a new filter in IE 5.5 that allows a small hack that fixes the problem: AlphaImageLoader.
Let's just look at a simple code behind a simple yet nice transparent PNG:
<html>
	<body bgcolor="black">
		<img src="dic.png" alt="DreamInCode transparent png">
	</body>
</html>

And lets see how it renders (in FireFox and IE 6):
Posted ImagePosted Image
Notice how IE displays a gray background for the PNG. Annoying, isn't it? It can ruin your whole site. Now, lets change the html code a bit:
<html>
	<body bgcolor="black">
		<span style="filter=progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dic.png',sizingMethod='scale'); width:256px; height:84px;"></span>
	</body>
</html>

Now lets see how it looks on IE:
Posted Image
Great! Now it works on IE! The problem is that FF will show nothing... That's because of the way the filter works. Try to imagine that it loads the png image as a background. Now doing this for the original IMG tag wouldn't have fix anything since the image tag rendered gray (would have overlapped over the correctly displayed PNG). That's why we used a SPAN tag. But we can make it work on both (actually, all browsers). The code above is just a proof of concept as to fixing the transparency.
This is where Javascript comes in handy.
Before we begin, you must know 2 things:
  • The filter fix requires both the height and the width attributes to be set in order for it to work;
  • The CSS filter declaration must be applied only on IE as it wouldn't work on any site, and the original image must be replaced!
The prerequisites:
A 1x1 pixel transparent GIF image (some people work with span as the proof of concept above. But this has disadvantages pointed later in the tutorial);
A text editor and minor knowledge of JS.
Now lets see the requirements of our small script:
  • it must do the fix only for IE
  • it must apply the fix only for png images
  • it must get the width and height of the image even if it's unspecified in the HTML code

Now lets get to work:
Point no. 1: run the script only for IE.
This is easy and somewhat suggested by the fix itself: it uses filters (that don't work on any other browsers, to my knowledge); so... the js code would be:
if ( document.body.filters ){
	//do the fix
}
This conditional check will only execute the code if the document.body.filters attribute works (it is only defined on IE);
Point no. 2: it must apply the fix only for png images
This is easy too. All we need to do is search in the SRC attribute of the image tag. If it contains the ".png" string, the script can go on and fix the problem. We will use regular expressions to do a case insensitive search:
pattern=/.png/gi;
if(obj.src.search(pattern)!=-1){
	//it's a png, go right ahead
}

Point no. 3: We must get the width and height of the element even if they aren't specified in the html code.
This is the last part before the actual fix. And this is easy to, using the offsetWidth and offsetHeight attributes:
imgWidth=obj.offsetWidth;
imgHeight=obj.offsetHeight;

Now that we have fulfilled the requirements, lets make the final script:
function fixPngTransparency(obj){
	if(document.body.filters){
		pattern=/.png/gi;
		filterFix="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+obj.src+"',sizingMethod='scale');";
		if(obj.src.search(pattern)!=-1){
			obj.style.width=obj.offsetWidth+"px";
			obj.style.height=obj.offsetHeight+"px";
			obj.style.filter=filterFix;
			obj.src="blank.gif";
		}
	}
}

The code should be self explanatory. Now, an example on how to call it:
<img src="dic.png" onload="java script:fixPngTransparency(this);" />

We will add this to the original html code to see if it works. The code should now be:
<html>
<head>
<script type="text/javascript">

function fixPngTransparency(obj){
	if(document.body.filters){
		pattern=/.png/gi;
	   

filterFix="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ob

j.src+"',sizingMethod='scale');";
		if(obj.src.search(pattern)!=-1){
			obj.style.width=obj.offsetWidth+"px";
			obj.style.height=obj.offsetHeight+"px";
			obj.style.filter=filterFix;
			obj.src="blank.gif";
		}
	}
}

</script>
	<body bgcolor="black">
		<img src="dic.png" alt="Dream in Code test png"

onload="java script:fixPngTransparency(this);">
	</body>
</html>
If you check, it will render perfectly on both FireFox and IE (and on all other browsers).
Make sure you have that blank.gif!
Now, you might think "what if I need the onload event for something else?" or "Do I have to write the onload event for every png?". There is another way.
Another function that will fix all of the png images.
function fixImages(){
		imageCollection=document.body.getElementsByTagName("IMG");
		for(i=0; i<imageCollection.length; i++){
			   fixPngTransparency(imageCollection[i]);
		}
}

You will find both functions in the attached archive in a JS file and the blank.gif image.
Good luck codding!

Attached File(s)

  • Attached File  files.zip (577bytes)
    Number of downloads: 751


Is This A Good Question/Topic? 0
  • +

Page 1 of 1