Question

我使用ImageMapster.js成功创建了一个imagemap，但我遇到了一个问题。我的客户希望在页面加载时选择一个区域，并且当用户在地图上悬停时，所选区域将被取消选择并且行为与其他区域相似。但是，我似乎无法解决如何实现这一目标。所选区域始终保持选中状态。这是我的初始代码：

$('#mpMap').mapster({
map: $('#mpMap'),
mapKey: 'data-key',
set: true,
fillOpacity: .6,
fillColor: 'faf7db',
stroke: true,
strokeColor:'faf7db',
strokeWidth: 1,
scaleMap: true,
clickNavigate: true,
isSelectable: false,
areas:  [{
key: "area_1", 
selected: true,
}],
});

我知道使用selected：true会一直选择区域，但它是我能找到的唯一一个在pageload之后直接选择区域的函数。我试图找出如何创建一个新的状态，将重置鼠标悬停时的所有初始设置。我尝试了几件事（例如修改甲壳虫乐队的演示代码），但是我无法在mousover上取消选择area_1。

我希望有人可以帮助我，或者告诉我这个脚本是否可行。

Answer 1

我不确定我理解您的观点，但您可以尝试以下方法。默认的imagemapster行为，当您选择一个区域时，该区域被标记为已选中（默认情况下它具有笔触和填充模糊背景）。我只是更改选项render_select以使其视觉状态正常

$("#fixImage").mapster({

            render_select: {
                stroke: false,
                fill: false
            },

            ...

});

将鼠标悬停在地图上时，取消选择图像映射的选定区域

1 个答案: