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

Flip-Cards with Local Images 1
Make "backstretch" slideshow display images randomly 3
Image not changing between "mute" & "un-mute" images. 5
Having difficulty with the layout of these images / video for this web page 2
How Do I Use AlphaImageLoader with Dynamic Images? 5
transparent PNG supported by most browsers? 1
How can i fix Mysql images not found error? 0
PNG transparency in IE6 1

Members online

Total: 75 (members: 4, guests: 71)
Robots: 413

Forum statistics

Threads
473,982
Messages
2,570,186
Members
46,739
Latest member
Clint8040

Latest Threads

Top