...

View Full Version : PNG displayed in IE



JoshTrav
12-12-2007, 05:39 PM
I am looking for a good way to get PNG images to display in earlier versions of IE.

Can anyone recommend a solid way of doing this?

I want to avoid the horrid grey backrounds that show in IE.

Thanks,
Josh

BWiz
12-12-2007, 05:46 PM
I think PNG-8's work on IE6, however PNG24 (that allow alpha transparency) do not. There are scripts out there which allow PNG24's to work on IE6.

JoshTrav
12-12-2007, 05:54 PM
Yes. I was wondering if anyone knew where to find a reliable script. I have tried 2 now and both were intermitent.

One would occasionally shrink the art so it was un-viewable.

The second made it so the page would never stop loading.

Excavator
12-12-2007, 06:03 PM
I've had good luck with the bit of js below... but only when the .png is presented in the markup. If you use CSS to put the .png as a background image the transparency fails.

js (goes inside <head></head> tags):
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
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
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

JoshTrav
12-12-2007, 06:36 PM
I've had good luck with the bit of js below... but only when the .png is presented in the markup. If you use CSS to put the .png as a background image the transparency fails.

js (goes inside <head></head> tags):
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
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
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->


Very nice! Loads fast, no issues with image size, and I put it in a simple JS file so I can just refer it to keep page size small.

Thanks for the great addon Excavator!

Josh

moss2076
12-12-2007, 09:24 PM
If you wanna show png in IE 5.5 use the following html in your <head> part of the page -

if gte ie 5.5000]>
<link rel="stylesheet" type="text/css" href="path_to_the/ie55.css_file"/>
<![endif]-

Then you make a css file called ie55.css and put the following code for the element you want to show the png file, in this example it is for a unordered list called "leftmenu" -

ul#leftmenu {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='whereeveryourpngislocated.png' , sizingMethod='crop';
background:none;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum