imagemap 重启按钮脚本

Question

我想问一下如何为图像地图活动而不是为游戏设置重启按钮。 imagemap的逻辑：黑白图就是原图。单击数字后，彩色图像将替换原始图像，并显示单击的数字/答案是错误的还是正确的。

现在我的问题是：如何编写一个重启函数，当所有答案都打开时，它会恢复原始（黑白）图像。我用于点击的代码是：

$(document).ready(function() {
  $('#shape1').mapster({
    singleSelect: false,
    render_highlight: {
      altImage: 'images/binary_tree-00-00_color.png'
    },
    mapKey: 'color',
    fill: true,
    altImage: 'images/binary_tree-00-00_color.png',
    fillOpacity: 1,
  });
});

非常感谢您的关注和帮助。

我试着把代码放在这里：https://jsfiddle.net/mamekay/9vphykzz/

Answer 1

好的，我有一个工作设置。我无法让小提琴工作 - imageMapper 插件的 CDN 有一些问题。所以我看到的是黑白图像，当我将鼠标移到图像上时，我看到彩色图像区域出现 - 有时是红色十字，有时是绿色勾号。我在下面的代码中找到了重置图像映射器的方法。

$(document).ready(function() {

  $('.reset').on("click", function(e){
    e.preventDefault()
    $('#shape1').mapster('unbind');
    imageBind();
  });

var imageBind = function() {  
  $('#shape1').mapster({
    singleSelect: false,
    render_highlight: {
      altImage: 'p2.png'
    },
    mapKey: 'color',
    fill: true,
    altImage: 'p1.png',
    fillOpacity: 1,
  });
}

  imageBind()

});

您还需要为按钮添加重置类。

<button class="reset" onClick="">Restart</button>

这里发生的是，当页面加载时，imageBind() 函数运行以设置 imageMapper。然后，当单击重置按钮时，mapster unbind 会清除映射器，然后调用 imageBind() 函数重新设置它。

imageMapper docs 非常有用。

我想这就是你所需要的。