Question

除了这个问题Highlight text when hover imagemap area and vice versa - using imagemapster之外，我还在寻找一种解决方案，将类添加到imagemap之外的图像中。目的是当悬停在图像映射的一部分上时，在图像映射上方的图像下方显示一条线。有关示例和部分工作脚本（基于上述问题）：http://jsfiddle.net/kyzho2v4/3/

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('div').attr('class').split('-');
            var part = parts[2];
            highlightArea(part);

        });

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


});

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

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

Answer 1

将OP的答案作为答案发布：

我找到了一个解决方案，所以对于那些正在搜索相同内容的人：我只添加了一个新的css类（line1）并稍微更改了jquery脚本：http://jsfiddle.net/88c0odmn/7/

//
function highlightArea(key) {
$('area[name=part-' + key + ']').mouseenter();

$('div.menu-item-' + key + ' a').addClass('line1');
}

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

在悬停图像映射上突出显示图像类

1 个答案: