pngfix.js and rollover in IE

Discussion in 'Javascript' started by Bribro, Aug 1, 2005.

  1. Bribro

    Bribro Guest

    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, Aug 1, 2005
    #1
    1. Advertising

  2. Bribro

    Bribro Guest

    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 + ";"
    + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
    img.outerHTML = strNewHTML
    i = i-1
    }
    }
    }
    window.attachEvent("onload", correctPNG);
     
    Bribro, Aug 1, 2005
    #2
    1. Advertising

  3. Bribro

    Kimmo Laine Guest

    "Bribro" <> kirjoitti
    viestissä:sdrHe.34375$...
    >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 <>
     
    Kimmo Laine, Aug 1, 2005
    #3
  4. Bribro

    Bribro Guest

    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.AlphaImageLoader" +
    "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

    Am i wrong?
     
    Bribro, Aug 1, 2005
    #4
  5. 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
    > 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);


    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...
     
    Justin Koivisto, Aug 1, 2005
    #5
  6. Bribro

    Bribro Guest

    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.
     
    Bribro, Aug 2, 2005
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob R. Ainscough

    RollOver and onMouseOver?

    Rob R. Ainscough, Jan 13, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    8,012
    S. Justin Gengo [MCP]
    Jan 14, 2006
  2. WiZZ
    Replies:
    6
    Views:
    7,688
  3. Leythos
    Replies:
    4
    Views:
    3,632
    Leythos
    Mar 30, 2005
  4. Bribro

    pngfix.js and rollover in IE

    Bribro, Aug 1, 2005, in forum: HTML
    Replies:
    13
    Views:
    7,122
  5. Martin Weil
    Replies:
    8
    Views:
    1,595
    dorayme
    Dec 17, 2006
Loading...

Share This Page