Question

请查看结合了普通图像映射HTML，CSS和jQuery 1.9的http://jsfiddle.net/6WNQM/1/。

jquery代码：

jQuery(document).ready(function ($) {
    $('#regions_fr').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',
        onMouseover: function (evt) {
            var parts = evt.key.split('-');
            var part = parts[1];
            highlightArea(part);
        }
    });

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

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

您会看到法国地图，该地图分为多个（地理）区域。重叠，您会看到一些旅游区域重叠一个或多个区域，并且彼此重叠。

我现在被困住了。我想看看具体的功能，但在尝试了几种插件和CSS技术后，我想知道它是否可能是我想要的：

首先需要的功能是将鼠标悬停在某个区域上会突出显示相应的文本链接，反之亦然。这有效：）
其次是地理区域“Bourgogne”可以悬停，但在IE中只有顶部可以悬停并突出显示。有什么想法吗？
然后我们有两个旅游区的重叠部分。我希望它们在重叠部分悬停时作为一个组工作。换句话说，当我点击重叠部分时，我希望看到重叠的部分被突出显示，并且“tour-regio 1”和“tour-regio 2”的选择框都被检查。

如果有人可以帮助我，我很好奇，我被困住了。提前谢谢。

图像映射：重叠区域，突出显示和IE

0 个答案: