jquery - PNGのアルファを「ホットスポット」として使用して、クリック/ホバーイベントを添付できますか?

Question

ディスカッションを開く 私は、このコードを最適化し、おそらくオブジェクトを作成しようとしています。しかし、もっと重要なことは、私は関数に慣れていないということです。変数を渡し、取得し、返す方法を学びたいです。誰かがこれに関する良いチュートリアル リンクを持っている場合、または議論したい場合は、ここから始めてください。:)

ご存じのとおり、画像は長方形です。個別の z-index レイヤーの div 内に透明な PNG がいくつかあります。画像の 1 つをクリックしようとしたときに問題が発生しましたが、z-index が高い div によってブロックされていました。PNG とその親 div をクリックしてこの効果を達成することは可能ですか? 添付の画像を参考にしてください。私の要点をよりよく示しています。

ありがとう！

つまり、何らかの理由で、PNG のアルファをヒットスポットとして使用できると考えました。笑 @そのアイデア。そこで、新しい別のコンテナーにオーバーレイ div を作成し、これらがヒットスポットとして機能しました。

ご覧のとおり、これは無限のカルーセルです。クリックすると、ヒットスポットの z インデックスと画像の z インデックスが変化します。これは控えめに言っても興味深いプロジェクトでした。私はそれを最適化し、関数をより効率的に使用する方法を学びます (つまり、変数を渡す、取得する、変数を返すなど)。

家に帰ったらJavaScriptを投稿して、興味深い会話を盛り上げたいと思います。最適化する方法について何かアイデアがあれば、共有してください! :)

(function (w, d) {
$(w).load(function () { //window load
    preload();
    $('#info div a:not([rel=ad])').find('img').hide();  //hides 'learn more' buttons
}); //end window.load

$(d).ready(function () {        //document ready
    onHover();                  //activate hover
    onClick();                  //activates click function
});                             //end document.ready

var isFirst =   ["1"],      //flag to see if the first click was triggered on a hotspot or not
    pxPos   =   ["1px", "399px", "577px", "782px", "969px", "1162px", "1330px"],    //pixel position where we will animate the targets
    name    =   ["bill", "sophia", "brian", "jenn", "mom"],                         //names of talent; array used 
    thisZ   =   0;                                                                  //z-index used later to swap current target to front, and move others behind current

$('.left, .right').hide(); 

function onHover () {               //hover function  -- note: 'thisName' is a different variable in this f(n) than in onClick()
    $('.hit').hover(function () {
        var _this = this,
        thisName = $(_this).parent().attr('id'),
        img = '_img/' + thisName + '.png';
        $(_this).parent().next().find('img').attr('src', img);

    }, function() {
        var _this = this,
        thisName = $(_this).parent().attr('id'),
        img = '_img/' + thisName + '-d.png';
        if (!($(this).parent().next().hasClass('current'))) {
            $(_this).parent().next().find('img').attr('src', img);
        }
    })
}

function onClick () {
    $('a.left').bind('click', function (e) { 
        e.preventDefault();
        //left arrow click function
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            pos = 'p5';
            var o = [name[1],name[2],name[3],name[4],name[0]];
            name = o;
            var thisName = name[3];
            updateArr(thisName, pos);
        }; //end if animated
    })

    $('a.right').bind('click', function (e) {               //right arrow click function
        e.preventDefault();
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            pos = 'p3';
            var o = [name[4],name[0],name[1],name[2],name[3]];
            name = o;
            var thisName = name[3];
            updateArr(thisName, pos);
        } //end if animated
    })

    $('.hit').bind('click', function () {                   //click function
        if (!$('.p').is(":animated")) {                     //checks if animation is running and prevents click action
            var _this = this;
            var thisName = $(_this).parent().attr('id');    //name of person who is clicked on

            if(isFirst[0] === "1") {                        //execute actions on first click
                $('h1').hide();
                $('.left, .right').fadeIn().show();         //fade in arrows
                $('#bg2').fadeIn().show();                  //fade in dark bg

                var pos = checkPosition(_this);             //checks position of clicked person
                updateArr(thisName, pos);                   //update array

                isFirst[0] = "2";                           //sets flag to "not first click"

            }else if(isFirst[0] === "2") {                  //all other clicks but the first click

                var pos = checkPosition(_this);             //checks position of clicked person
                updateArr(thisName, pos);                   //update array

            }   //end if
        }   //end if animated
    })      //end hit check
}


function checkPosition (_this, thisName) { //find current position and return
    var pos;
    if($(_this).parent().next().hasClass('p1')) {
        pos = 'p1';
    }else if($(_this).parent().next().hasClass('p2')) {
        pos = 'p2';
    }else if($(_this).parent().next().hasClass('p3')) {
        pos = 'p3';
    }else if($(_this).parent().next().hasClass('p4')) {
        pos = 'p4';
    }else if($(_this).parent().next().hasClass('p5')) {
        pos = 'p5';
    }
    return pos;
} //end checkClickPosition()

function updateArr (thisName, pos) { //update array

    // find person index in array
    for(l=0; l <= name.length; l++) {
        if(thisName == name[l]) {
            var thisIndex = l;
        }
    } //end for

    // search for index by matching index to position in array. create new array.
    if(thisName === name[thisIndex]) {
        var o = [];

        if(thisIndex === 0) {
            o = [name[2],name[3],name[4],name[0],name[1]];
        }else if(thisIndex === 1) {
            o = [name[3],name[4],name[0],name[1],name[2]];
        }else if(thisIndex === 2) {
            o = [name[4],name[0],name[1],name[2],name[3]];
        }else if(thisIndex === 3) {
            o = [name[0],name[1],name[2],name[3],name[4]];
        }else if(thisIndex === 4) {
            o = [name[1],name[2],name[3],name[4],name[0]];
        }
        name = o; //update array with new array

        updateFlags(); //update current flag

    } //end if

    //removes previous hilight and current class
    $.each($('.p'), function () {
        if(($(this).attr('class').length > 5)) { 
            var oldImg = $(this).find('img').attr('src');
            img = '_img/' + $(this).prev().attr('id') + '-d.png';
            $(this).find('img').attr('src', img);
            $(this).removeClass('current');
        }
    });

    //creates new hilight
    $('#' + thisName).next().addClass('current');
    img = '_img/' + thisName + '.png';
    $('#' + thisName).next().find('img').attr('src', img);

    updateZIndex();         //update z-indexes
    animate(pos);           //animates array

    var current = thisName;
    return disorderText(current);

} //end updateArr()

function updateFlags() {
    //removes position flags
    $('.p').each (function() {
        $(this).removeClass('p1 p2 p3 p4 p5');
    }); //end each

    //add new flags
    for(i=0; i < name.length; i++) {
        $('#' + name[i]).next().addClass('p' + (i + 1));
    } //end for
} //end updateFlags()

function updateZIndex (thisZ) {
    //re-orders hotspot z-indexes
    $("#" + name[3]).children().each(function(thisZ) {
        thisZ++;
        $(this).css({'z-index': thisZ + 800});
    });
    $("#" + name[4]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 700});
    });
    $("#" + name[2]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 600});
    });
    $("#" + name[1]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 500});
    });
    $("#" + name[0]).children().each(function(thisZ) {
        thisZ++;
        thisZ = thisZ + 1;
        $(this).css({'z-index': thisZ + 400});
    });
    $('.p1').css({'z-index': 40});
    $('.p2').css({'z-index': 50});
    $('.p3').css({'z-index': 60});
    $('.p4').css({'z-index': 70});
    $('.p5').css({'z-index': 30});

} //end updateZIndex()

function animate (pos) {

    //set up selector names for hitspot container and image container
    var selector1 = '#' + name[0] + ', #' + name[0] + 'i',
        selector2 = '#' + name[1] + ', #' + name[1] + 'i',
        selector3 = '#' + name[2] + ', #' + name[2] + 'i',
        selector4 = '#' + name[3] + ', #' + name[3] + 'i',
        selector5 = '#' + name[4] + ', #' + name[4] + 'i',
        easeType = 'easeOutCubic',
        easeOutType = 'easeOutCubic';

    if (pos === 'p1') {
        $(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 600, easeType); //p5
        $(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 600, easeType); //p1
        $(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 600, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 1350, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 1350, easeType); //p4
    }else if (pos === 'p2') {
        $(selector1).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 700, easeType); //p5
        $(selector2).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[6]}, 400, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 1550, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 1550, easeType); //p4
    }else if (pos === 'p3') {
        $(selector1).animate({'left': pxPos[6]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[0]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[1]}, 500, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
    }else if (pos === 'p4') {
        $(selector1).animate({'left': pxPos[1]}, 500, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[5]}, 700, easeType); //p4
    }else if (pos === 'p5') {
        $(selector1).animate({'left': pxPos[1]}, 700, easeType); //p5
        $(selector2).animate({'left': pxPos[2]}, 700, easeType); //p1
        $(selector3).animate({'left': pxPos[3]}, 700, easeType); //p2
        $(selector4).animate({'left': pxPos[4]}, 700, easeType); //p3
        $(selector5).animate({'left': pxPos[0]}, 200, easeOutType).delay(0).animate({'opacity': 0}, 0).animate({'left':pxPos[6]}, 0).animate({'opacity': 100}, 0).animate({'left': pxPos[5]}, 500, easeType); //p4
    }

} //end animate()

function disorderText (current) {

    var _this           =       ['swd', 'osa', 'nar'],
        swd             =       "Of the 15 million Americans who work evening or night shirts, 25% may have shift work disorder.",
        osa             =       "18 million Americans suffer from OSA.",
        nar             =       "Narcolepsy affects 1 in every 2,000 Americans.",
        link            =       "<a href=''><img src='_img/learn-more.png' width='125' height='31' class='learn_more' /></a>",
        brian_quote     =       '"' + "I get enough sleep during the day, but I'm still exhausted at work." + '"',
        sophia_quote    =       '"' + "Since I started working nights, I struggle to stay awake." + '"',
        jenn_quote      =       '"' + "I'm so tired on my shift that it's hard to do my job" + '"',
        bill_quote      =       '"' + "I struggle to stay awake even outside of work - I'm almost dozing off at my son's Little League games." + '"',
        mom_quote       =       '"' + "Quote to come." + '"',
        i               =       0,
        p_name          =       "",
        quote           =       "",
        info            =       "",
        disorderArr     =       ["_this", "swd", "osa", "nar", "link", "brian_quote", "sophia_quote", "jenn_quote", "bill_quote", "mom_quote", "i", "pname"];


    $('#info').children().each (function () {
        $(this).removeClass('open');
        $(this).find('.content').html('<p>');
    });

    switch(current) {
        case 'brian'    :   i = 0;
                            p_name = '<h2><b>Alex,</b> Bartender</h2>';
                            info = swd;
                            quote = brian_quote;
                            break;
        case 'sophia'   :   i = 0;
                            p_name = '<h2><b>Sophia,</b> EMT</h2>';
                            info = swd;
                            quote = sophia_quote;
                            break;
        case 'jenn'     :   i = 0;
                            p_name = '<h2><b>Susan,</b> Nurse</h2>';
                            info = swd;
                            quote = jenn_quote;
                            break;
        case 'bill'     :   i = 1;
                            p_name = '<h2><b>Martin,</b> Real Estate</h2>';
                            info = osa;
                            quote = bill_quote;
                            break;
        case 'mom'      :   i = 2;
                            p_name = '<h2><b>Susan,</b> Mom</h2>';
                            info = nar;
                            quote = mom_quote;
                            break;
    }
    $('#' + _this[i]).addClass('open');

    //handles information swap
    $('#info').children().each (function () {
        if($(this).hasClass('open')) {
            $(this).find('.header span').addClass('down');
            $(this).children().find('a img').show();            //show 'learn more' button
            $(this).find('.content').addClass('disorder');
        }else if(!$(this).hasClass('open')) {
            //$(this).children().find('a').hide();              //hide 'learn more' button
            $(this).find('.header span').removeClass('down');
            $(this).find('.content').removeClass('disorder');
        }
    }); //end show/hide 'learn more' button

    return $('#' + _this[i]).find('.content').html(p_name + '<p class="gen_quote"><i>' + quote + '</i></p>' + '<p class="gen_info"><b>' + info + '</b></p>' + '<p class="learn-more">' + '&nbsp' + link);
}

function preload(imgArray) {
    $(imgArray).each(function(){
        $('<img/>')[0].src = this;
    });
}

preload([ '_img/ad.png', '_img/arrow_sm_d.png', '_img/arrow_sm.png', '_img/arrow-left.png', '_img/arrow-right.png', '_img/bill-d.png', '_img/bill.png', '_img/border.png', '_img/brian-d.png', '_img/brian.png', '_img/corner.png', '_img/hit.gif', '_img/jenn-d.png', '_img/jenn.png', '_img/mom-d.png', '_img/mom.png', '_img/sidebar-bg.png', '_img/sophia-d.png', '_img/sophia.png', '_img/stone-bg-d.jpg', '_img/stone-bg.jpg' ]);

}(ウィンドウ、ドキュメント));

Answer 1

pointer-eventsCSSプロパティを試してください：

CSS プロパティ pointer-events を使用すると、作成者は特定のグラフィック要素がマウス イベントのターゲットになる状況 (存在する場合) を制御できます。このプロパティが指定されていない場合、visiblePainted 値と同じ特性が SVG コンテンツに適用されます。

要素がマウス イベントのターゲットではないことを示すことに加えて、値 none は、マウス イベントが要素を「通り抜け」、代わりにその要素の「下」にあるものをターゲットにするように指示します。

https://developer.mozilla.org/en/CSS/pointer-events

Answer 2

興味深いアプローチは CSS プロパティpointer-events:noneを使用することです。これにより、要素がホバー イベントとクリック イベントを受信できなくなります。代わりに、それを下の要素に渡します。

この問題の詳細については、この非常に役立つディスカッションを確認してください。

さらに、この CSS プロパティのブラウザー互換性に注意してください。互換性とバージョンの決定的な答えを得るには、おそらく少し調査する必要があります。

ここに私の短い研究があります：

Mozilla Dev Network からの Pointer-Event の互換性

「Can I Use?」のポインター イベントの互換性

Pointer-Events チュートリアルといくつかの互換性に関する注意事項

Answer 3

それは素晴らしい質問であり、私は通常悲観論者ではありませんが、ここでゲームの変更を伴わない解決策を見つけることはできないと思います. つまり、PNG の代わりに SVG を使用することをお勧めします。そうすれば、シェイプの境界に一致するホットスポットを実際に作成できます。ただし、これがシナリオで機能するかどうかはわかりません。Raphaël — JavaScript ライブラリを見てください。

あのね？HTML5 Canvas 要素を使用してキャンバスにラスター イメージを描画することもできますが、アルファ チャネルをデータとして使用して、各ピクセルを手動でステップ実行し、その上にホットスポットを構築する必要があります。

ネイティブでこの機能があればいいのにと思いますが、そうは思いません。私はいくつかの良い選択肢を与えたことを願っています。