1

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

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

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

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

  • 首先需要的功能是悬停在一个区域上会突出显示相应的文本链接，反之亦然。这有效:)
  • 其次是地理区域“勃艮第”可以悬停，但在IE中只有顶部可以悬停并突出显示。任何想法？
  • 然后我们有两个旅游区的重叠部分。我希望他们在重叠部分悬停时作为一个组工作。换句话说，当我单击重叠部分时，我希望看到重叠部分被突出显示，并且“tour-regio 1”和“tour-regio 2”的选择框都被选中。

我很好奇是否有人可以在这里帮助我，我被困住了。提前致谢。

4

0 回答 0