How can I use an image map to show/hide a particular div?

Question

I have an image map and would like to be able to show/hide a div based on which item in the image map I click?

html...

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasMap"/>

<map id="texasMap" name="Texas">
    <area shape="circle" coords="135,150,45" href="#" alt="" item="texas"/>
</map> 

<div id="texas">You clicked the Republic of Texas!</div>

jquery so far...

$("#texas").hide();

$("???").click(function(){
    $("#texas").show();
}

I'm thinking I'd like to grab the "item" tag out of the map, or something similar, and use that to know which div to show. I'm not sure how to make that call however. Also, I'm not even sure if this is the best way to this so any suggestions would be appreciated.

Here's a fiddle!

Thanks!!!

Answer 1

You have to change your image map specifications. Like this:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/U.S._Territorial_Acquisitions.png/320px-U.S._Territorial_Acquisitions.png" alt="" usemap="#texasmap" id="" />

<map id="texasMap" name="texasmap">
  <area shape="circle" coords="135,150,45" href="#" alt="" item="texas" id="texasArea"/>
</map>

And then in your jQuery, you have a syntax error and you need to bind the map, something like this:

EDIT:

$("map#usaMap").click(function(ev){
  var target = $(ev.target);
  var targetId = target.attr('id');
  if(targetId == 'texasArea') {
    $("#texas").show();
  }
});

Check this UPDATED JSFiddle that I've build for you.