I'm working on an imagemap that not only is hi-lighted, but also does a show/hide on a some additional information on a Drupal site:
http://dev-wateraid.pantheonsite.io/where-we-work
If you hover over countries like Canada you'll see the DIV show up, but if you hover over the United States the area is hi-lighted but it doesn't trigger the show/hide -- similar with Sierra Leone, South Africa, the UK, Papua New Guinea, and a few others.
The code I'm using to do the show hide is:
$('area').on({
mouseover : function(e){
var $this = $(this),
$office = $('#'+$this.prop('alt'));
$($office).removeClass("hidden");
},
mouseout : function(e){
var $this = $(this),
$office = $('#'+$this.prop('alt'));
$($office).addClass("hidden");
}
});
The image map holds the alt tag which is then used to show/hide a div:
<area coords="96,67,97,61,76,40,69,45,55,36,55,-20,-4,-31,-40,-15,-41,-12,-20,0,-23,3,-31,2,-31,-1,-47,5,-39,11,-27,11,-20,9,-19,16,-29,21,-33,19,-39,29,-35,33,-37,36,-29,40,-25,38,-23,41,-23,46,-17,44,-12,47,-5,45,-7,52,-35,68,-33,69,-14,61,9,45,5,43,16,32,14,43,29,38,30,34,34,33,45,38,58,40,59,40,60,41,71,48,79,59,81,57,87,67,90,66" shape="poly" href="/" alt="United States">
This is the div that would be toggled to be show with the United States information.
<table class="hidden" id="United States">
<tbody><tr valign="top">
<td>
<a href="/countries/united-states"><img width="64" height="64" alt="" src="http://dev-wateraid.pantheonsite.io/sites/default/files/flags/United-States.png" typeof="foaf:Image"></a>
</td>
<td>
<h3>United States</h3>
The America team helps to coordinate and fund operations across our country programs, with Nicaragua a particular focus.
</td>
</tr>
</tbody></table>
I keep looking for reasons most of the countries might work but others wouldn't -- spelling is consistent -- I don't believe there are any hidden characters.
I've validated the code as much as I could, but I just can't see it.
jQuery selector can't handle "#United States"... It pretty much ignores the "States". So if you really need the ID to be "United States" you can use:
$("[id='"+$this.attr('alt')+"']")
Or you can just change the 'alt' and 'id' to "UnitedStates".