pngfix.js and rollover in IE

[Bribro]

I have an horizontal menu with a dreamweaver-generated rollover effect.
Images are png and their transparency is handled by pngfix.js
In IE, applied the pngfix, the rollover doesn't work at all. Obviously,
if I cut the pngfix the rollover works fine but the transparency of
images is gone.
Can anybody help me?
Thanks.

 

[Bribro]

or better...
which part of the following code interferes with onmouseover in IE?

function correctPNG()
{
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 + ";"
+ "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

 

[Kimmo Laine]

I have an horizontal menu with a dreamweaver-generated rollover effect.
Images are png and their transparency is handled by pngfix.js
In IE, applied the pngfix, the rollover doesn't work at all. Obviously, if
I cut the pngfix the rollover works fine but the transparency of images is
gone.

I can't help you with the problem itself, but you'll be pleased to hear that
in IE 7 transparent png's are supported. In a couple of years we can leave
the disgusting png-fixes behind, once people have started using IE 7.

 

[Bribro]

Maybe the problem is including the management of onmouseover and
onmouseot events in this piece of code:

var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" +
"width:" + img.width + "px; height:" + img.height + "px;" + imgStyle +
";" + "filterrogidXImageTransform.Microsoft.AlphaImageLoader" +
"(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

Am i wrong?

 

[Justin Koivisto]

or better...
which part of the following code interferes with onmouseover in IE?

function correctPNG()
{
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 + ";"
+ "filterrogidXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);

Just guessing, but I'd bet it has to do with the width & hight actually
being set to 0 instead of what it should be... Doing that cause MSIE to
not show the image at all as if it was never there to begin with...
Maybe try adding something in there to test if the width & height
(img.width & img.height) are actually set when the script is trying to
do its job... If it's only on the rollovers, that would be my guess...

 

[Bribro]

Just guessing, but I'd bet it has to do with the width & hight actually
being set to 0 instead of what it should be... Doing that cause MSIE to
not show the image at all as if it was never there to begin with...
Maybe try adding something in there to test if the width & height
(img.width & img.height) are actually set when the script is trying to
do its job... If it's only on the rollovers, that would be my guess...

I wrote the exact width and height instead of vars and nothing changed.
W3C guide says that the <span> tag can manage onmouseover and similar
event properties, so i tried but it didn't work. Any suggestion about
how to re-write the strNewHTML var? For sure i'm not a jscript expert
but i think that the hack is in make that var manage events.