0

私は superfish メニューを使用していますが <img src>、いくつかのアクセシビリティ ガイドラインに従う必要があるため、すべての背景画像の変更を変更に置き換える必要がありました。そのため、メニューはすべてテキスト付きの画像で構成されています。

IE では、画像をクリックすると、リンクをたどる前に赤い X 画像に一瞬変わります。どうにかしてそれを取り除く必要があり、困惑しています。これは今まで経験したことがありません。

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);
        }   
    }
});

編集:IE8でテストしています。私が考えた「赤い X」はいたるところにある: IE では、src からロードされなかった画像。左上に赤い X の画像が付いた黒い境界線が表示され、代替テキストが表示されます。mouseenter focusin イベントハンドラーを実行し、クリックすると別の -hover.png を src に追加しているようです。したがって、クリックするとsrcがimgName-hover-hover.pngに変更されます

別の編集！そのため、クリックすると focusin イベント ハンドラが起動されます。

編集: IE と FF はクリックをフォーカス イベントとして処理していたので、これは mouseenter ハンドラーと focusin ハンドラーを実行していました。私の新しいコードは次のとおりです。

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;  
    }
});

これは何らかの方法でクリーンアップできると確信していますが、少なくとも機能しています。

4

1 に答える 1

0

新しいソースの画像に置き換える前に、画像の表示または可視性を変更するだけです。

その後、交換後に元に戻します。

他のコードを置き換えるには、次のようにします。

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');

もちろん、インライン表示を使用している場合は、その設定方法に応じて、コンテナーの css にデフォルトのサイズ値を設定する必要がある場合があります。

于 2012-05-15T16:59:01.770 に答える