2

是否可以将 ImageMapster 与多个图像和地图一起使用？

在我的场景中，有多个图像。每张图片都有自己独特的地图，一次只显示一张图片。当单击一个图像的一部分时，它会更改为具有不同地图的另一个图像。我通过直接更改元素的“src”和“useMap”值来做到这一点。但是，ImageMapster 只会对第一张图像起作用，其余的不会突出显示。我曾尝试在更改图像/地图之前和之后取消绑定和重新绑定 ImageMapster，但这无济于事。

如何使用 ImageMapster 进行这项工作？

4

2 回答 2

3

是的，您可以使用 imagemapster 图像映射来处理多个图像，但我怀疑如果您尝试动态更改 DOM 元素，您会遇到非常困难的事情。

回想一下 jQuery 如何处理注入元素与创建 DOM 时存在的元素的区别。对于注入的元素，jQuery 必须使用.on()方法来捕获它们的事件，是吗？好吧，当您动态更改 DOM 元素时，您会在 DOM 中删除/重新注入它们。因此，已初始化为前一个元素的插件现在必须初始化为新注入的元素，并且它必须能够使用.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"
        }
        ]
});

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

于 2013-12-30T22:26:37.643 回答
1

你有多少不同的图像（和图像映射）？

除非它们太多，否则我会将所有图像和图像映射预加载到不同的 DIV 中，并隐藏除第一个以外的所有图像。然后您可以使用 .hide() 和 .show() 隐藏包含当前图像的 DIV 并显示带有您希望显示的图像的 DIV。这样，每个图像都可以拥有自己的图像映射，而无需动态更改 DOM。

不过有一个警告：我在隐藏 DIV 中的图像上激活 imagemapster 时遇到问题。在 IE8 中，当显示 DIV 时，如果在隐藏 DIV 时在图像上激活了 imagemapster，则图像将保持不可见。也许这是由于我的案例的某些特定情况，但如果 IE8 功能对您很重要，我建议您在完全接受此解决方案之前进行一些测试。

于 2014-01-28T08:02:37.453 回答