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!
