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.

Answer 2

A similar answer was posted by someone else. I'm not sure why it was deleted. It appears to work:

$('[item="texas"]')

Here's an example:

<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" />
    <area shape="circle" coords="245,170,30" href="#" alt="" item="florida" />
</map> 

<div id="texas" class="display">You clicked the Republic of Texas!</div>
<div id="florida" class="display">You clicked Florida!</div>

$('[item="texas"]').click(function(){
    $(".display").hide();
    $("#texas").show();
    return false;
});
$('[item="florida"]').click(function(){
    $(".display").hide();
    $("#florida").show();
    return false;
});

http://jsfiddle.net/xtKXL/5/

Edit:

To make things a little more dynamic, you can grab the "item" from the <area> over which you're hovering and use that value to display the appropriate <div>:

$('[item]').click(function(){
    var item=$(this).attr('item');
    $(".display").hide();
    $("#"+item).show();
    return false;
});

http://jsfiddle.net/xtKXL/6/