IE Transparent PNG Fix

[terrybarnes]

Hi, I use this javascript to help with the tranparency problem that occurs in IE6. The problem I have is that I use another javascript for a photo gallery - the problem I face is that this function does not work until the other javascript has finished doing it's thing which depending on the speed of site load can take around 4-5 seconds - in that time I get the problem of any png's not being transparent.

Any ideas?

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
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
}
}
}

[gergoe]

For exactly the same reason I decided to move this alpha blending tweak into the server-side script I used (and there I decide what to do based on the User-Agent http header) on one of the website I made recently. (The designer decided to make nice fancy background and put some boxes on this background with shadows beneath, and the customer did not understand what's the problem with this :-)

To stick to the current situation (and the other script indeed need to finish first before this can be ran properly), then you could go around the problem and use gif images first (or images without shadows or alpha blending), and then replace them with png files while applying the alpha blending tweak, this might slightly help.

If you could send some relevant code from the other script that would help understanding your problem better.

[terrybarnes]

Apologies for not getting back sooner. I've actually decided to use PNG's until the client decides the exact background colours he wants and then I'll change them to gifs.

[Dabrowski]

If it's for a transparent border or background, what I have done in the past is code the page with a PNG, then take a screenshot of it and see what RGB it actually turns, then use that colour. Or just make the GIF/JPG from your screenshot.

[terrybarnes]

What it was originally for is that I was going to code the background colour with CSS so the client could change the colour of his website whenever he wanted.