By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,908 Members | 2,056 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,908 IT Pros & Developers. It's quick & easy.

pngfix.js and rollover in IE

P: n/a
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.
Aug 1 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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[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.AlphaIma geLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
Aug 1 '05 #2

P: n/a
"Bribro" <as***@asd.asdf> kirjoitti
viestissä:sd********************@news4.tin.it...
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.

--
SETI @ Home - Donate your cpu's idle time to science.
Further reading at <http://setiweb.ssl.berkeley.edu/>

Soulman <et****************@5P4Mgmail.com>
Aug 1 '05 #3

P: n/a
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 +
";" + "filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader" +
"(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

Am i wrong?
Aug 1 '05 #4

P: n/a
Bribro wrote:
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[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.AlphaIma geLoader"
+ "(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...
Aug 1 '05 #5

P: n/a
Justin Koivisto wrote:
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.
Aug 2 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.