How to execute simple modal with image mapping?

See more:

mapping

I am trying to create a general organizational chart. I want to show the staffs under the team leads in a simple modal through image mapping. My mapping isn't functioning, but the modal is there. Anyone can tell what is wrong in my codes and help me resolve it?

What I have tried:

Script:

<script>
$("#Athan").on("click", function(e){
// e.preventDefault();
// alert('test');
$('#modalAthan).modal('show');
</script>

Image mapping for Athan:
<img src="Organizational Chart.PNG" alt="" usemap="#map" />
<map name="map">
<area shape="rect" coords="7, 488, 205, 561" id="Athan"/>
</map>

Modal button:
<button type="button" class="btn btn-info btn-link" data-toggle="modal" data-target="#myModal" >
<area shape="rect" coords="7, 488, 205, 561"/>
</button>