如何link两个ImageMap区域？

Question

我有一张图像，其中复杂的多边形区域设置为 link 到页面内的锚点。除此之外，当悬停在该区域上时会突出显示。

不过我希望这个区域 link 显示一段文字，这样当鼠标悬停在上面时，它们都会突出显示。

我猜想如果他们拥有相同的头衔和 alt，它会以这种方式运作。

Answer 1

已找到解决方案。下面是 fiddle 中的代码，我发现它解决了这个问题。

HTML

<!DOCTYPE html>
<body>
<div id="menu">
    <ul>
    <li class="menu-item-a"><a href="#">Part A</a></li>
    <li class="menu-item-b"><a href="#">Part B</a></li>
    <li class="menu-item-c"><a href="#">Part C</a></li>
    <ul>
</div>
<img id="house" src="http://also.kottke.org/misc/images/filip-dujardin.jpg" style="" usemap="#house-map">
<map name="house-map">
    <area shape="rect" name="part-a" coords="0,0,500,183" href="#" />
    <area shape="rect" name="part-b" coords="0,183,500,366" href="#" />
    <area shape="rect" name="part-c" coords="0,366,500,500" href="#" />
</map>
</body>
</html>

JS

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

这很难的主要原因是不幸的是 fiddle 在代码中途关闭了初始函数，从而导致 wordpress 只加载了一半。要解决此问题，只需移动 "});"到最后，就像我在上面的例子中所做的那样。

如何link两个ImageMap区域？

How to link two ImageMap areas?

imagemap