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...

Answer 1

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/

Answer 2

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.