悬停图像映射区域时突出显示文本，反之亦然 - 使用 imagemapster答案

【问题标题】：Highlight text when hover imagemap area and vice versa - using imagemapster悬停图像映射区域时突出显示文本，反之亦然 - 使用 imagemapster
【发布时间】：2013-05-07 22:10:41
【问题描述】：

我有一张图片、一个简单的文本菜单和jQuery imagemapster plugin。

当悬停图像的某个区域时，我希望突出显示相应的菜单项（如在悬停时），当悬停菜单项时，我希望突出显示相应的图像地图区域。

我设置了一个简单的 jsfiddle 来说明问题： http://jsfiddle.net/tqpFU/23/

下面是基本的 jQuery 开始：

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

【问题讨论】：

标签： jquery hover imagemapster

【解决方案1】：

使用函数添加悬停属性：

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

【讨论】：

谢谢，但请您详细说明一下，也许更具体一些？想要更详细的代码。在您的小提琴中，警报显示悬停在图像的任何部分，而悬停在菜单的任何部分都没有任何反应。 - 博。 6 分钟前

【解决方案2】：

这个小提琴就是我要找的：jsfiddle.net/Tr4hE/2/

ruhley 在 att github 上几乎完全回答了；谢谢！ 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');
}

【讨论】：