imagemap restart button script

Question

Ich möchte fragen, wie man eine Neustart-Taste nicht für ein Spiel, sondern für Imagemap-Aktivität einstellen. Die Logik der Imagemap: Schwarz-Weiß-Bild ist das Originalbild. Nach dem Klicken auf Zahlen ersetzt das farbige Bild das Originalbild und zeigt an, ob die angeklickte Nummer/Antwort falsch oder richtig ist.

Nun meine Frage ist: wie eine Restart-Funktion zu schreiben, die die ursprüngliche (schwarz und weiß) Bild zurückbringen wird, wenn alle Antworten geöffnet werden. Der Code, den ich für Klicks verwende, lautet:

$(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, 
    }); 
}); 

Vielen Dank für Ihre Aufmerksamkeit und Hilfe.

Ich habe versucht, hier den Code zu setzen: https://jsfiddle.net/mamekay/9vphykzz/

Answer 1

ok Ich habe eine Arbeits setup.I nicht die Geige arbeiten könnte - ein Problem mit dem CDN für den Imagemapper Plugin. Also, was ich sehe, ist das schwarze & weiße Bild und wenn ich die Maus über das Bild bewege, sehe ich die farbigen Bildbereiche - manchmal ein rotes Kreuz und manchmal ein grünes Häkchen. Ich habe festgestellt, dass der Image-Mapper wie im folgenden Code zurückgesetzt werden kann.

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

}); 

Sie müssen auch die Reset-Klasse zur Schaltfläche hinzufügen.

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

Was hier passiert, ist, dass, wenn die Seite des imageBind lädt() gibt den Imagemapper einzurichten läuft. Wenn Sie dann auf die Schaltfläche "Zurücksetzen" klicken, löscht die Zuordnung des Kartengebers den Mapper und ruft dann die Funktion imageBind() auf, um sie erneut einzurichten.

Die imageMapper docs sind sehr nützlich.

Ich denke, das war alles was Sie brauchten.