Jquery/imagemapの組み合わせが正しく動作しない

Question

Jqueryとhtml imagemapの組み合わせを使用して、異なる領域にロールオーバーするバナーを作成しています。それの基本的な機能は正常に動作しますが、私はそれをより高度にすることに問題があります。

これは、何が起こっているjsfiddle http://jsfiddle.net/2fav4/

あるホバーが正常に動作し、新しい画像が表示され、すべてのことです。ユーザーが画像をクリックすると、その画像はそのまま残っていますが、クリックされた状態が決して消えないという問題があります。ユーザーが画像をもう一度クリックすると、その画像を閉じることができます。

Answer 1

このトリックは.toggleClass()です。大幅に簡素化

、私が手：

jQuery("#map-container area").mouseover(function() { 
    jQuery('.'+$(this).attr('id')+'-map').show(); 
}).mouseout(function() { 
    jQuery('.'+$(this).attr('id')+'-map').not('.selected').hide(); 
}).click(function(){ 
    var regionMap = jQuery('.'+$(this).attr('id')+'-map'); 
    jQuery('#map-container img.region').not(regionMap).removeClass('selected').hide(); 
    regionMap.toggleClass('selected').not('.selected').hide(); 
}); 

はfiddle

を参照してくださいあなたは、私はそれが、少なくとも私が見ることができるHTMLで、非機能だとして....listを行うには、すべてを削除することを確認できます。リストの内容が重要な場合は、それを再度追加する必要があります。