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. 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. |
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. |
|
|
|
|
||||||||
|
|
|
|
||||||||
|
|
|
|
© Copyright 2005 Niko Halink, NY-MediaLabs Backgroundtiles courtesy of squidfingers & k10k. |