javascript - jQuery 图像映射器 : Highlight Areas prior to selecting

Question

我真的很喜欢 jQuery 插件 Image Mapster。然而，我真的遇到了一个砖墙，我需要一些帮助才能攀登。

我需要做以下事情:

1. 在任何交互之前用边框和颜色突出显示所有图像映射区域
2. 使用可能不同的边框和颜色启用鼠标悬停突出显示和鼠标移开取消突出显示(返回上面的状态 #1)
3. 启用具有第三种不同边框和颜色的选择

我最初的印象是下面的 JavaScript 可以为我做到这一点:

    $('#Image1').mapster({
        fillOpacity: 0.5,
        fillColor: FF0000,

        stroke: true,
        strokeOpacity: 1.0,
        strokeColor: 00FF00,
        strokeWidth: 2,

        render_highlight: 
        {
             fillOpacity: 0.5,
             fillColor: 00FF00,

             stroke: true,
             strokeOpacity: 1.0,
             strokeColor: FF0000,
             strokeWidth: 2,
        },
        render_select: 
        {
             fillOpacity: 1.0,
             fillColor: 0000FF,

             stroke: false
        }
    });

它似乎支持 mouseover/mouseout (#2) 和选择 (#3) - 但没有按照我的意愿点亮我的区域 (#1)。

有没有对 ImageMapster 有更多经验的人有什么建议？

谢谢!

Answer 1

几点评论:

1. 您在“render_highlight”之前的代码是定义区域在默认情况下突出显示时的外观。即使有效，它也是为了突出显示而不是选择。

2. 但是您添加了一个可选的渲染键“render_highlight”，这将禁用您之前设置的选项。这就是为什么当您将鼠标移到区域上时您看不到您在“render_highlight”上定义的效果

3. 对于您的 #1，我的建议是删除“render_highlight”之前的所有选项，并添加这行 staticState: true,。这将使所有区域始终处于选中状态，但这将违背您的目标#3。我找不到更好的方法来实现您的所有三个目标。等待其他人的帮助。

这是您可能想要查看的文档 http://www.outsharked.com/imagemapster/default.aspx?docs.html