Transparent png question

[eternal]

I know IE6 doesn't support this very well so I have used the following:

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
   }
  }
}

This works fine but I am also trying to apply a filter to make the png opaque before you roll over it like so:

.trans{ 
filter: Alpha(Opacity=30); 
-moz-opacity:0.3; 
opacity:0.3; 
cursor: pointer; 
}
.notrans{ 
filter: Alpha(Opacity=100); 
-moz-opacity:1.0; 
opacity:1; 
cursor: pointer;
}

However .. this isnt working on IE6, is there any method to achieve this without swapping the actual image.

[Xapti]

The alpha filter does work in IE... chances are the script is somehow messing up with it so that opacity is no longer supported.

[eternal]

Anyway around this? I know it should work but something is not quite right

[Robin_reala]

I’m confused. You’ve got an alpha transparent PNG but you’re also trying to adjust its opacity using the MS alpha filter? If it’s just to switch between full opaque / desired translucency then you might just be able to add a background colour of white (for normal) and set it to transparent when you roll over?

[eternal]

I would but unfortunately it is on a gradient background!

[Achernar]

Unfortunately you're overriding the "AlphaImageLoader" filter with the "Alpha" filter from the CSS, and the png disappears.
You can deal with this situation by applying both filters at once.

filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image URL',sizingMethod='image')
progid:DXImageTransform.Microsoft.Alpha(opacity=30);

You can either do this entirely in javascript within the document, or maybe in the CSS file with a "filter: expression()" (javascript code)

Note:
you're using AlphaImageLoader for IE versions above 5.5
if ((version >= 5.5)
which means also IE7 that natively supports png transparency.

There is a script that enables png transparency in IE<=6 (one CSS line). It's usually much easier to use.
[webfx.eae.net...]

[edited by: Achernar at 12:30 am (utc) on May 7, 2007]

[eternal]

Thanks for that.

I am using IE conditional comments so that IE7 will miss the png.js.

Im still not totally sure how I would solve this, could someone provide an example?