IE6: jQuery pngfix + mouseover-events

Question

i want to change the src-attrib of an img-element (png) when the cursor hits the element. it works fine in all browser except the IE6 :(

at first the script does a pngfix() via jQuery PNGfix. So it wraps the img-element with a span-tag and drops the src-content through a filter into the span-tag.

my idea is, to get the style/css/... from the runtime-span element an replace this - instead of replacing the src-attrib of the img-tag. here is a snippet of my code:

$(document).ready(function(){
$('img').bind
({
    mouseover : function() 
    {
        symbiontStatus = 1;
        $('img').css('backgroundImage', 'img/img02.png');
//...

In the pngfix script i've added a class to the span, so i can call it:

$(document).ready(function(){
    $('.pngfix').bind
    ({
        mouseover : function() 
        {
alert('over!');
            symbiontStatus = 1;
            $('.pngfix').css('backgroundImage', 'img/img02.png');
    //...

i have no idea to get the img02 into the pngfix as background. you? maybe?

thank you, mario

Answer 1

You could set the image src attribute and then again call pngfix on it. Before doing this you should remove the span added by the plugin after the img tag because pngfix will again create a span. Now that we will remove the span on which you have bound mouseover/mouseout events we will have to live. Try this

$(document).ready(function(){
    $('.pngfix').live('mouseover', function(){
            symbiontStatus = 1;
            var $img = $(this).prev();
            $(this).remove()

            $img.attr('src', 'img/img02.png').pngfix();
    //...
     });
});