imagemap restartボタンスクリプト

Question

ゲーム用ではなく、イメージマップ用の再起動ボタンを設定する方法をお尋ねします。イメージマップのロジック：白黒画像が元の画像です。数字をクリックすると、カラー画像が元の画像に置き換わり、クリックされた数字/答えが間違っているか正しいかが表示されます。

今私の質問は：すべての答えが開かれたときに、元の（黒と白）の画像をもたらすリスタート機能を作成する方法。クリックに対して使用しているコードは次のとおりです。

$(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

OK、私が働いてsetup.Iがフィドルを動作させることができなかった持っている - CDNといくつかの問題をimageMapperプラグインのために。だから、私が見るのは黒色の&の白い画像です。画像の上にマウスを移動すると、カラー画像の領域が表示されます。赤い十字や時には緑のティックが表示されることがあります。私は、以下のコードのようにイメージマッパーをリセットする方法を見つけました。

$(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() 

}); 

また、ボタンにリセットクラスを追加する必要があります。

ここで起こるのは、ページがimageBind（）関数を読み込んでimageMapperをセットアップするときです。リセットボタンがクリックされると、マップスターのアンバインドによってマッパーがクリアされ、imageBind（）関数が呼び出されて再度設定されます。

imageMapper docsは非常に便利です。

私はそれがすべてあなたが必要と思った。