belatedPNG / IMG nodes / Javascript event handling

July 2, 2009

I have noted in the past in known issues that, in order to not have to use a pixel GIF (a practice I find annoying), I have to set IMG nodes to visibility:hidden.  This prevents any attached Javascript event handling from functioning as expected, because you can no longer, say, click on the IMG anymore.

Over email, I’ve answered inquiries about this with nothing better than using a pixel GIF workaround and moving the PNG image visibility to the parent as a background image.  Lame.

I’ve decided that 0.0.9a will simply copy all events bound to any fixed IMG nodes to the resulting visible VML, and will modify them slightly so that they fire in the scope of the IMG node as intended.  I estimate that will get around that catch-22.   One can hope, anyway.


9 Responses to “belatedPNG / IMG nodes / Javascript event handling”

  1. Сергей Says:

    Hey Drew, did anyone mailed you that problem, that starting from v.0.0.7 you can`t set the same class to all elements, because it will work only with the first one?

  2. johnbl4ck Says:

    first of all, thanks for this brilliant technique it works like a charm but i found some issue:

    after applying your fix text nodes with class .red become corrupted:

    css goes like: {
    color: #d30202;
    font-size: 18px;

    currently i have no time to investigate further but when i renamed the class to .redd everything display correctly.

    belatedPNG ver. 0.0.8

    anyway huge thanks for your outstanding work!

  3. akc Says:


    thank you very much for sharing DD_belatedPNG! it’s brilliant and works like a charm.

    v.0.0.9 with its support of the img events will, of course, be even more awesome. in the meantime, i am wondering if i can get around the limitation by responding to events on the hidden img’s parent rather than the img itself?

    see, i too need to make a png image swap on mouseover to work in ie6.

    the classic example:

    <img id="tobeswapped" src="f-u-ie6.png

    i think i can achieve my effect if when hovering over “mylink”, i hide the VML node and set “mylink”s background image to the on-state image, then when mousing out, restore visibility to the VML — voila…?

    alas, i am just a hack, so i do not know how to read your code to figure out how to access that VML node. i tested by “doing stuff” to all children of “mylink”, and though other elements inside would be affected, the VML would not.

    any tips, hints, observations are greatly appreciated!

  4. Adam Says:

    Thank you thank you thank you!!!

  5. Will Fastie Says:


    Thanks for a piece of work that works, a nice change from the other PNG “solutions” I’ve tried.

    I look forward to 9a. A micro-site I’m working on has a dynamic, jQuery-based hover behavior that does not fire with 8a.


  6. Alan Says:

    Are there any basic but complete examples of how to use the png fix that you could point me to? I am much more of a designer than a programmer and my grasp of javascript is very limited.

  7. jeremyBass Says:

    I’d like to make a request… in the script path for I think it’s 100% needed to check if there is a background. 1 very popular way to do sprite setups it is have an that is a blank with a css background image as the sprite for layout reasons… I know this can be added and is a small deal so it’d be greatly appreciated…

    on the nice IE6 fix… kudos on the great start… Cheers

  8. jeremyBass Says:

    oh it striple out the img… sorry it should read ” in the script path for img tag I…” ” is to have an img tag that is a blank with a css background image “

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: