Question

我有一个复杂的多边形区域设置图像链接到页面内的锚点。除此之外，当突出显示在该区域上空盘旋时。

但是我希望这个区域与一段文字相连，这样当两者都悬停在一起时，它们都会突出显示。

我认为如果他们拥有相同的头衔并且alt会以这种方式运作。

Answer 1

找到解决方案。下面是我发现修复问题的小提琴代码。

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

这很难的主要原因是因为不幸的小提琴在代码中途关闭了初始函数，从而导致wordpress只加载了一半。要解决此问题，只需移动＆＃34;}）;＆＃34;就像我在上面的例子中一样。

如何链接两个ImageMap区域？

1 个答案: