Not a Jquery expert at all, but can usually do what I need.. until now at least. I'm working on a website where the main navigation will be 2 image maps One for The USA and one for Canada. To save screen real estate we wanted to put each image map in a Jquery accordion.
The problem is, the first image map works perfectly, but when you open the second accordion (Canada in this case) Clicking the image gets the URL from the USA map underneath (from the now collapsed USA accordion )
<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>
Obvisouly (I hope) I have trimmed out most of the area tags. Various attempts to set z-index etc doesn't work. Any ideas?
Can't believe I didn't spot this earlier... For this to work, each image map needs a unique usemap value
Changing the code slightly for the 2nd image map and it works perfectly
<h2>CANADA</h2>
<div class="center-text">
<img src="/canada.jpg" usemap="#map2" />
<map name="map2">