PNG transparency under IE

Internet explorer 6 and its older versions doesn't manage the transparency of pictures under .PNG format (Firefox has no problem with that)

To have the transparency for .PNG format under IE, you have to put a small script which is shown below :

First of all, open your Notepad (Start > Programs > Accessories > Notepad) and copy this :

Quote :

// Correctly handle PNG transparency in Win IE 5.5 or higher.
// http://homepage.ntlworld.com/bobosola. Updated 02-March-2004

function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

Then, you save this file under this name : pngfix.js
For this, you must ensure that "All files" is selected in the "Filetype" field when you save it, to avoid having this : pngfix.js.txt

Then you have to host this file. Up to now, there is no known English direct host which accepts hotlink for js files, so you must use a FTP account (the Web space provided by your Internet Service Provider is enough). Here's a tutorial about it : FTP Account Tutorial

Once hosted, the installation on your editboard is pretty simple. In Admin Panel > General > Configuration > Site Description, you insert this code

Code:

<script language=javascript src=http://ADDRESS_PNGFIX.js></script>

PNG without transparency




PNG with transparency




Transparent GIF