Internet Explorer has a problem with showing the alpha transparency of PNG-files, instead of showing transparency it shows an blueish light gray. WebFX has found a way to counteract this and dubbed it PNG Behavior. By implementing this technique the transparency of PNG-files shows correctly in Internet Explorer. The only thing you have to do is include a Cascading Style Sheet and use HEIGHT and WIDTH in the IMG-tag.
<IMG SRC="images/image.png" HEIGHT="80" WIDTH="150">This works perfectly, the only thing is you have to put in the height and width of every image, and if you have a lot of PNG-images on your site that will be quite a task. I knew about a ASP-script that could retrieve the height and width properties from image files by Mike Shaffer. Using these two techniques and a function I wrote in ASP you can now show PNG-files with transparency correct in Internet Explorer. I've also written a function in PHP to automate the process.
You can see the result below. To make it work you code the IMG-tag a little differently, normally you write:
<IMG SRC="images/image.png" HEIGHT="80" WIDTH="150">
Now you write:
<IMG SRC=<%= PNGspex("images/image.png") %>>
which has the same output but retrieves the image-properties automatically. Download the zip-file which includes all necessary scripts and a guide how to use them.
For this example I have made two pictures, a black & white square which is 50% transparent and a star which has space around it which is 100% transparent.
The b&w square and the star pictured here, are what you would see normally when viewing them in Internet Explorer. |
 |
Here are the b&w square and the star again, shown against various backgrounds, but now they are shown correctly regardles of the browser you are using. |
