5ホットスポットをクリックすると、メッセージが表示されます

Question

基本的に5ホットスポットのリンクが付いた画像があります。私は、5つすべてがクリックされると、「うまくやった」ボタンを明らかにできる方法が欲しい。私はスタックを見渡しましたが、これを行うものは見つかりませんでした。これを行うための単純な条件付きの方法はありますか？私はこれをした最後の時間は、フラッシュにあった、それは非常に簡単でしたが、知識をコーディングすることは冗長になり、私は再び開始する必要があり、そのすべて:(

<img src="/park.jpg" width="760" height="500" usemap="#Map" border="0" /> 
    <map name="Map" id="Map"> 
    <area shape="rect" coords="40,39,147,95" href="#" /> 
    <area shape="rect" coords="383,66,534,129" href="#" /> 
    <area shape="rect" coords="71,209,218,276" href="#" /> 
    <area shape="rect" coords="460,224,626,282" href="#" /> 
    <area shape="rect" coords="136,326,511,431" href="#" /> 
    </map> 

Answer 1

これにはjavascript/jqueryが必要です。ここにjqueryの小さな例があります。

のjQuery：

function allclicked() { 
    var allclick = true; 

    for (var i=0; i<5; i++){ 
     if(!$("area:eq("+i+")").hasClass("wasclicked")){ 
      allclick = false; 
     } 
    } 
    if (allclick){ 
     if ($("#a-wild-div-appeares").length < 1) 
      $("body").append("<div id='a-wild-div-appeares'>Content of the div</div>"); 
    } 
}; 


    $("area").on("click", function(){ 
     $(this).addClass('wasclicked'); 
     allclicked(); 
    }); 

Answer 2

あなたはこのためにJavaScriptを使用することができます - あなたの領域ごとに変数が設定されていることを示す変数を設定する関数を呼び出すことができます（エリアを区別するために領域 "id"を送信する可能性があります）。hrefアトリビュート経由でjavascript:

イベントハンドラでは、すべての領域がクリックされたかどうかをテストします（つまり、関連する変数がクリックされている）成功した場合は成功ボタンを表示します。