Jquery 手风琴问题中的 2 个图像映射

Question

根本不是 Jquery 专家，但通常可以做我需要的事情.. 至少到现在为止。我正在一个网站上工作，该网站的主要导航将是 2 个图像地图，一个用于美国，一个用于加拿大。为了节省屏幕空间，我们想将每个图像贴图放在 Jquery 手风琴中。

问题是，第一个图像地图工作得很好，但是当你打开第二个手风琴（在这种情况下是加拿大）时，单击图像从下面的美国地图（从现在倒塌的美国）获取 URL手风琴）

<div id="accordion">
<h2>UNITED STATES</h2>
<div class="center-text">
<img src="/usa.jpg" usemap="#map" />
<map name="map">
<area shape="circle" coords="479, 159, 10" href="/MD/"/>
<area shape="circle" coords="487, 126, 10" href="/NJ/"/
....
</map>

<h2>CANADA</h2>
<div class="center-text">
<img src="/canada.jpg" usemap="#map" />
<map name="map">
<area shape="circle" coords="49, 19, 10" href="/ON/"/>
<area shape="circle" coords="87, 16, 10" href="/AB/"/
....
</map>
</div>
</div>

很明显（我希望）我已经删除了大部分区域标签。设置 z-index 等的各种尝试均无效。有什么想法吗？

Answer 1

真不敢相信我没有早点发现这一点... 为此，每个图像映射都需要一个唯一的 usemap 值

稍微更改第二张图像映射的代码，效果完美

<h2>CANADA</h2>
<div class="center-text">
<img src="/canada.jpg" usemap="#map2" />
<map name="map2">

Jquery 手风琴问题中的 2 个图像映射

2 image maps in Jquery accordion issue

html

css

jquery

imagemap