DD_belatedPNG.js - how to access the vml object? this is for a PNG image-swap

I am trying to use Drew Dillard's awesome DD_belatedPNG fix + jQuery to achieve a run-of-the-mill image-swap on hover -- but with PNGs, and to work on IE6.

Example: <a id="thelink" href="blah.html"><img src="f-u-ie6.png" /></a>

Since DD's script sets the visibility of the original image to "hidden", you can't effectively hover over it. A lot of people, I have noticed, are thwarted by this limitation. Enough so that Drew mentioned he would try to get a work-around into the next version of his PNG fix.

Well, in the meantime, I thought I could get around this by handling the hover event on the image's parent instead. So onmouseover, I would hide the VML object created by DD_belatedPNG while setting a background image on "thelink", and onmouseout, show the VML object again and set the background image to nothing.

The following code was just to see if I could access the VML object, but it does not work on the VML. It hides all manner of other children, but not the VML. Any ideas?

$(document).ready(function(){
  $("thelink").hover(function() {
    $(this).children().attr({ 
      style: "visibility:hidden"
    });
 开发者_Python百科 }, function() {
    $(this).children().attr({ 
      style: "visibility:visible"
    });
  });
});

Alternatively, can anyone suggest a great PNG image-swap method? I know that you can swap a background image of a link. But you still need to have something inside the A tag. That's not my case. Also, you could put a transparent GIF in the A tag and have the background image swapped to achieve the effect, but I really don't want to do that. Thanks for your insights!

---

After looking at the innerHTML (using javascript in the browser address bar) and seeing the code that generates the VML object which displays my PNG when using the DD_belatedPNG fix, I decided to take a different tack.

I am now using TwinHelix's IE PNG Fix. I have both OFF and ON state PNGs in the A tag, but the ON state images are set to display: none. I am using jQuery to toggle these images. See my other post for specific code.

All this to make sure my PNG rollovers work in IE6.