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有些问题。所以我看到的是黑＆amp;白色图像，当我将鼠标移到图像上时，我看到彩色图像区域出现 - 有时是红色十字，有时是绿色勾。我找到了重置图像映射器的方法，如下面的代码所示。

$(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将清除mapper，然后调用imageBind（）函数再次设置它。

imageMapper docs非常有用。

我认为这就是你所需要的一切。