Amanda H. wrote:
Hi guys,
I just started switching my site over to tableless css, and I'm using a
very lovely, transparent PNG-24 image. I have been trying to figure
out if there is any way to replace an image before loading only for
certain browsers using either javascript or PHP (I'm using PHP to
switch stylesheets and prefer server-side).
The problem is IE's handling of PNG-24 files: every other browser has
alpha compatibility and displays PNG-24 images correctly, even IE/Mac.
But IE/Win shows the transparent areas as blue. This is a commonly
known bug that I haven't been able to find a definitive fix for.
What I want to happen is for the JS or PHP to detect if the browser is
IE/Win. Then, if so, replace the code or load an alternate css
stylesheet to display a GIF instead of the PNG. I am mostly using the
PNG-24 in a div as a background-image in an external stylesheet.
Anyone had any idea if this is possible? I only have a meager
understanding of javascript and PHP, so any help would be greatly
appreciated.
Thanks,
Amanda H.
Hi Amanda,
You've come to the right place. I went through quite a discovery
process to learn about this. Take the following javascript, and
put it in your <HEAD></HEAD> section of your page. Hopefully you
won't have to do this much longer once Microsoft gets their browser
fixed and can recognize PNG format. We'll all be better off for it.
You can do the research after seeing this javascript in action, it
will only execute in IE, others ignore it. I would recommend doing
the research on the Microsoft.AlphaImageLoader thingy, there are
a few sites with demos etc to enlighten you, but the bottom line is
future IE's will handle PNG, and websites the world over will be
better than ever.
<head>
<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
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.AlphaIma geLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
</head>
