Image Map

by elizabethkmathew

HTML

<img src="http://bctaimlab-qa.qburst.build/assets/images/assessing-readiness-img.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
  <area alt="" title="" href="#" shape="poly" coords="418,334,474,357,498,414,501,465,518,484,554,501,589,497,620,472,631,400,600,304,541,245,474,209,407,201,382,200,414,218,431,247,435,283,436,308" data-target="two" class="step" />
  <area alt="" title="" href="#" shape="poly" coords="255,571,253,546,258,532,264,520,274,509,279,506,285,501,294,496,298,492,306,490,316,487,328,489,331,490,340,493,344,491,359,499,366,501,368,507,372,507,381,512,397,517,404,517,426,517,442,515,456,509,464,501,472,498,475,489,481,481,484,486,487,502,490,501,497,508,508,518,523,528,535,536,554,535,567,535,586,533,598,529,607,527,615,522,605,534,600,540,599,549,576,578,561,591,535,614,490,637,446,651,390,652,334,639,284,613,264,592"
  data-target="three" class="step" />
  <area alt="" title="" href="#" shape="poly" coords="238,546,243,515,256,489,283,465,321,456,337,455,330,414,343,370,371,348,410,316,416,255,353,216,292,238,265,260,221,315,196,384,198,459,213,512" data-target="four" class="step" />
</map>

<div id="one" class="hide">
  one
</div>
<div id="two" class="hide">
  two
</div>
<div id="three" class="hide">
  three
</div>
<div id="four" class="hide">
  four
</div>

CSS

.hide {
  display: none;
}
#one {
  display: block;
}

JavaScript

$('area').on('click', function(e) {
  e.preventDefault();
  console.log($(this).data('target'));
  $(".hide").hide().filter('#' + $(this).data('target')).show();
}

);