DD_belatedPNG.js - how to access the vml object? this is for a PNG image-swap.
- by akc
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"
});
}, 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!
