Easy Click Menu

by Kofod

HTML

<div style="position: relative;">
       
    <div class="hide UniqueName" style="position: absolute; overflow: auto; width: 302px; height: 510px; left: 0px; top: 0px;"><img src="https://i.imgur.com/qiRu5Qx.png" alt="" /></div>
    <div class="hide AnotherUniqueName" style="position: absolute; overflow: auto; width: 312px; height: 520px; left: 0px; top: 0px; display: none;"><img src="https://i.imgur.com/6FNMt7V.png" alt="" /></div>
    <img src="https://i.imgur.com/7kZCvky.png" usemap="#image-map">
</div>

<map name="image-map">
    <area class="button AnotherUniqueName" href="javascript:void(0)" coords="435,350,652,483" shape="rect">
</map>

<!-- <img src="https://i.imgur.com/qiRu5Qx.png" alt="" /> -->

CSS

* {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

JavaScript

$('.button').click(function() {
  var textBox = this.className.split(' ')[1];
  $('.hide').hide();
  $('.' + textBox).show();
});