Search code examples
jqueryhtmldictionaryarea

Area tag to display and hide div

I have an area map that when i click on a specific area I would like to display a certain div that corresponds to that selection. I.e. if you click on square1 in the map, it will display div1. If you click on square2 it hides div1 and displays div2. I am not able to obtain the expected result so far. I am open to suggestions if there is a better way to solve my problem.

<map name="FPMap0" id="FPMap0">
<area item="first" href="#" shape="polygon" coords="347, 79, 349, 201, 449,   248, 540, 204, 541, 82, 448, 34" />
<area item="second" href="#" shape="polygon" coords="560, 81, 562, 206, 660, 255, 756, 208, 758, 81, 659, 31"/>
</map>

<img width="1000" height="667" src="picture.png" usemap="#FPMap0" alt=""/>​

<div id="first">Text1</div>
<div id="second">Text2</div>

<script>
  $("map#FPMap0").click(function(ev){
  var target = $(ev.target);
  var targetId = target.attr('id');
  if(targetId == 'first') {
    $("#first").show();
  } else if(targetId=='second') {
    $("#second").show();
  }
  });
</script>
Solution

  • Because your area tags have an attribute (item) that matches the div id's, you can simply do this...

    $('area').on('click',function() {
    $('div').hide();
    $('#' + $(this).attr('item')).show();
});

    Example