jquery - imagemapster を使用して、イメージマップ領域にカーソルを合わせるとテキストを強調表示し、その逆も同様です

Question

画像、シンプルなテキスト メニュー、jQuery imagemapster プラグインがあります。

画像の領域をホバーすると、対応するメニュー項目が強調表示され (ホバーのように)、メニュー項目をホバーすると、対応する画像マップ領域が強調表示されます。

問題を説明するために単純な jsfiddle をセットアップしました: http://jsfiddle.net/tqpFU/23/

基本的なjQueryの開始の下：

jQuery(document).ready(function ($) {
    $('#house').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',
    });
});

Answer 1

このフィドルは私が探していたものです: jsfiddle.net/Tr4hE/2/

att github を介して ruhley によってほぼ完全に回答されました。ありがとう！ github.com/jamietre/ImageMapster/issues/133

jQuery(document).ready(function ($) {
    $('#house').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',

        //
        onMouseover: function (evt) {
            var parts = evt.key.split('-');
            var part = parts[1];
            highlightArea(part);
        },

        //
        onMouseout: function (evt) {
            var parts = evt.key.split('-');
            var part = parts[1];
            highlightAreaX(part);
        }

    });

        //
        $('a').hover(function () {
            var parts = $(this).closest('li').attr('class').split('-');
            var part = parts[2];
            highlightArea(part);
        });

        //
        $('a').mouseleave(function () {
            var parts = $(this).closest('li').attr('class').split('-');
            var part = parts[2];
            highlightAreaX(part);
        });

});

//
function highlightArea(key) {
    $('area[name=part-' + key + ']').mouseenter();
    $('a').removeClass('hover');
    $('li.menu-item-' + key + ' a').addClass('hover');
}

//
function highlightAreaX(key) {
    $('area[name=part-' + key + ']').mouseout();
    $('li.menu-item-' + key + ' a').removeClass('hover');
}