javascript - 具有多个图像和 map 的 ImageMapster

Question

是否可以将 ImageMapster 用于多个图像和 map ？

在我的场景中，有多个图像。每张图片都有自己独特的 map ，一次只显示一张图片。单击一个图像的一部分时，它会更改为具有不同 map 的另一个图像。我通过直接更改元素的“src”和“useMap”值来做到这一点。但是，ImageMapster 只会对第一张图片起作用，其余的不会高亮显示。我已经尝试在更改图像/ map 之前和之后取消绑定(bind)和重新绑定(bind) ImageMapster，但这没有帮助。

如何使用 ImageMapster 使其工作？

Answer 1

是的，您可以拥有多个带有 imagemapster 图像映射的图像，但我怀疑如果您尝试动态更改 DOM 元素，您将很难完成。

回想一下 jQuery 如何处理注入(inject)元素与创建 DOM 时存在的元素的区别。对于注入(inject)的元素，jQuery 必须使用 .on() 方法来捕获它们的事件，是吗？好吧，当您动态更改 DOM 元素时，您会在 DOM 中删除/重新注入(inject)它们。因此，插件——它被初始化为前一个元素——现在必须被初始化为新注入(inject)的元素，并且它必须能够使用.on()操纵该新元素的策略。这对插件要求很高。

然而，一切并没有丢失。

jsFiddle demo

上面的 jsFiddle 是一个工作示例，由开发人员自己的两个示例拼凑而成，显示了您在问题中描述的内容的粗略近似值。两个图像映射在同一页面上，但一个最初是隐藏的(我只使用两个图像/图像映射，但可能有几个最初隐藏，而不仅仅是一个)。

单击第一个图像映射时，在 imagemapster 的 onClick 回调中，我隐藏了包含该图像的 div 并取消隐藏下一个图像 div。真的就是这么简单:

var image = $('#vegetables');
image.mapster(
{
    fillOpacity: 0.4,
    onClick: function (e) {
        var newToolTip = defaultDipTooltip;
        $('#statemapDIV').show();  <====================
        $('#veggieDIV').hide();    <====================
    },
    toolTipClose: ["tooltip-click", "area-click"],
    areas: [
        {
            key: "dip",
            toolTip: defaultDipTooltip
        },
        {
            key: "asparagus",
            strokeColor: "FFFFFF"
        }
        ]
});

我希望这个解决方案对您有用。