Javascript Jquery/imagemap组合工作不正常

我使用Jquery和HTMLImageMap的组合来创建一个横幅，在不同的区域进行滚动。它的基本功能工作得很好，但我在使它更高级方面遇到了一些问题

这是JSFIDLE

---

现在的情况是，悬停工作正常，新图像出现等等。当用户点击图像时，它会保持不动（就像人们想象的那样），问题是点击状态永远不会消失。我希望用户能够通过再次单击图像来消除该图像。

诀窍是使用

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

看

---

您将看到，我删除了与

…list

有关的所有内容，因为它不起作用，至少在我可以看到的HTML中是这样。如果列表内容很重要，您必须将其重新添加。

您需要对图像使用绝对URL，以便它们显示在小提琴中。例如，存储图像的url。感谢您的提示，现在一切正常。然后您应该删除该问题，或者将您的解决方案放在下面，并为其他人接受它。抱歉，这意味着JSFIDLE正在工作，问题仍然存在。或者可能类似-不关闭鼠标，反复点击一个活动区域，你会看到不同之处。另外，一些蓝色奶牛怎么样？不幸的是，我不是平面设计师，只是一个低级的开发者：P