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 함께 할 수있는 모든 것을 제거 것을 볼 참조하십시오. 목록 내용이 중요한 경우 다시 추가해야합니다.