Img source changes on hover and focus change to red X in IE when clicked

Question

I'm working with the superfish menu and had to replace all background image changes to <img src> changes due to some accessibility guidelines I am forced to follow. So the menu is made up entirely of images with text in them.

In IE, when you click an image, it briefly changes to a red X image before following the link, and I need to get rid of that somehow and I'm stumped. I've never experienced this before.

var thisImg = null,
    newImg = null,
    imgSrc = null;

$(".sf-menu li").bind('mouseenter focusin', function () {

    if ( $(this).hasClass('sf-breadcrumb') ) {
        return;
    }
    else {
        thisImg = $(this).find("img:first"),
        newImg = thisImg.attr("src").replace(/.png/, "-hover.png");

        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); });
            thisImg.attr("src", newImg);
        }
    }
});

$(".sf-menu li").bind('mouseleave focusout', function () {  

    if ( $(this).hasClass('sf-breadcrumb') ) {
        return;
    }
    else {
        thisImg = $(this).find("img:first"),
        newImg = thisImg.attr("src").replace(/-hover.png/, '.png');

        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); });
            thisImg.attr("src", newImg);
        }   
    }
});

EDIT: I'm testing in IE8. "Red X" I figured was ubiquitous: In IE, an image which didn't load from the src. It displays a black border with a red X image in the upper left and displays the alt text. It seems like it is executing the mouseenter focusin event handler and adding another -hover.png to the src when you click as well. So the src is changing on click to imgName-hover-hover.png

Another Edit! So focusin event handler is being fired when clicked.

EDIT: For anyone wondering, IE and FF were handling clicks as focus events, so this was executing the mouseenter handler and the focusin handler. Heres my new code:

var thisImg = null,
    newImg = null,
    thatImg = null;

$(".sf-menu li").on('mouseenter', function () {
    if ( $(this).hasClass('sf-breadcrumb') ) {
        return;
    }
    else {
        thisImg = $(this).find("img:first"),
        newImg = thisImg.attr("src").replace(/.png/, "-hover.png");

        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); });
            thisImg.attr("src", newImg);
        }
    }
});

$(".sf-menu li").on('mouseleave', function () {  
    if ( $(this).hasClass('sf-breadcrumb') ) {
        return;
    }
    else {
        thisImg = $(this).find("img:first"),
        newImg = thisImg.attr("src").replace(/-hover.png/, '.png');

        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); });
            thisImg.attr("src", newImg);
        }   
    }
});

$(".sf-menu a").focus( function() {
    thisImg = $(this).find("img:first"),
    newImg = thisImg.attr("src").replace(/.png/, "-hover.png");

    if (thisImg.attr("src") == thatImg.attr("src")) {
        return; 
    }
    else if ( $(this).parent("li").hasClass('sf-breadcrumb') ) {
        return;
    }
    else {
        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); });
            thisImg.attr("src", newImg);
        }
        thatImg = thisImg;
    }
});

$(".sf-menu a").blur( function() {
    thisImg = $(this).find("img:first"),
    newImg = thisImg.attr("src").replace(/-hover.png/, '.png');

    if (thisImg.attr("src") == thatImg.attr("src")) {
        return; 
    }
    else if ( $(this).parent("li").hasClass('sf-breadcrumb') ) {
        return;
    }
    else {          
        if ( $(this).is(".sf-menu>li>ul>li") ) {
            thisImg.attr("src", newImg);
        }
        else {
            $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); });
            thisImg.attr("src", newImg);
        }
        thatImg = thisImg;  
    }
});

I'm sure this could be cleaned up in some way, but at least it's working.

Could you please post an example of what you mean? I don't know what you men by 'red X'. — Bram Vanroy, May 15 '12 at 15:56
Be sure to mention the version of internet explorer with which you are running into problems. Older or newer versions probably behave differently. — veeTrain, May 15 '12 at 16:00

score 0 · Answer 1 · answered May 15 '12 at 16:59

I would just change the display or visibility of the image before you try to replace it with the one from the new source.

Then change it back after its replaced.

so something like this to replace your other code:

thisImg = $(this).find("img:first");
$(this).find("img:first").css('display', 'none');
newImg = thisImg.attr("src").replace(/-hover.png/, '.png');

.....

if ( $(this).is(".sf-menu>li>ul>li") ) {
        thisImg.attr("src", newImg);
    }
    else {
        $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); });
        thisImg.attr("src", newImg);
    }
$(this).find("img:first").css('display', 'block');

of course if your using inline display you'd do that and you may need to set default size values in your css for the container depending on how its set up

The event handlers are working perfectly as is. The issue is when a nav item is clicked in IE, it executes the mouseenter focusin handler. — NJW, May 15 '12 at 17:13

Img source changes on hover and focus change to red X in IE when clicked

1 Answers1