Transparent png images in IE6

G

Greg Peters

I use png images with transparent backgrounds for the following ASP.NET
server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
Panel). The images display correctly in IE7, but not IE6. What is the
preferred solution to make all of these display correctly in IE6?
 
S

siccolo

I use png images with transparent backgrounds for the following ASP.NET
server controls:  Image, ImageButton, ImageMap, Panel (BackImageUrl for
Panel).  The images display correctly in IE7, but not IE6.  What is the
preferred solution to make all of these display correctly in IE6?
Click to expand...

I use the following:

<head><title></title>
<!--[if IE]>
<script type="text/javascript">
//lte IE 6
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
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]-->
<style>
table
{
-moz-opacity:0.5;
filter:alpha(opacity=50);
opacity: 0.5;
}
</style>
</head>
<body>
...
<table >
<tr>
<td>
<img src="<your png image">
</td>
</tr>
</table>
</body>
</html>

hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/

... more at http://www.siccolo.com/articles.asp
 
G

Greg Peters

Thank you for your response. I tried it out in my application. It does work
for images. It does not work for ImageButtons, ImageMaps or Panels with
transparent backgrounds.

siccolo said:
I use png images with transparent backgrounds for the following ASP.NET
server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
Panel). The images display correctly in IE7, but not IE6. What is the
preferred solution to make all of these display correctly in IE6?
Click to expand...

I use the following:

<head><title></title>
<!--[if IE]>
<script type="text/javascript">
//lte IE 6
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
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]-->
<style>
table
{
-moz-opacity:0.5;
filter:alpha(opacity=50);
opacity: 0.5;
}
</style>
</head>
<body>
...
<table >
<tr>
<td>
<img src="<your png image">
</td>
</tr>
</table>
</body>
</html>

hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/

... more at http://www.siccolo.com/articles.asp
Click to expand...
 
G

Greg Peters

Hello,
I solved the ImageMap problem by using blank images over the hot spots. The
panel backgrounds were just oval gradients, so I converted those to gifs,
which look just as good as the pngs. Thanks again for your post.

Greg Peters said:
Thank you for your response. I tried it out in my application. It does work
for images. It does not work for ImageButtons, ImageMaps or Panels with
transparent backgrounds.

siccolo said:
I use png images with transparent backgrounds for the following ASP.NET
server controls: Image, ImageButton, ImageMap, Panel (BackImageUrl for
Panel). The images display correctly in IE7, but not IE6. What is the
preferred solution to make all of these display correctly in IE6?
Click to expand...

I use the following:

<head><title></title>
<!--[if IE]>
<script type="text/javascript">
//lte IE 6
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
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]-->
<style>
table
{
-moz-opacity:0.5;
filter:alpha(opacity=50);
opacity: 0.5;
}
</style>
</head>
<body>
...
<table >
<tr>
<td>
<img src="<your png image">
</td>
</tr>
</table>
</body>
</html>

hope this helps...see it at http://apps.facebook.com/fbtestappsiccolo/

... more at http://www.siccolo.com/articles.asp
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How Do I Use AlphaImageLoader with Dynamic Images? 5
markup not working in IE6 1
Urgent!!, Watermarking images in asp.net pages 4
Adding a png with transparent background to a Image button 4
ASP.net pages work in Internet Explorer 6, but not 7 1
PNG transparency in ListView? 1
Question about Custom HTTP Module, PNG Images, and aspnet_isapi.dll 1
Transparent Gif not working in IE 4

Top