AJAX on click on area tag (html interactive maps)?

Question

HTML

Hello! The idea is this: using the map and area tags, make image areas, by clicking on which various data will be displayed using ajax (that is, without reloading the page). Please tell me how to do it? I can't imagine at all

<div class="map">
    <img src="img.png" class="map maphilighted" usemap="#simple">
  </div>

  <map name="simple">
    <area href="a.php" shape="poly" coords="78,14,75,29,71,37,96,28" >
    <area href="a.php" shape="poly" coords="73,38,50,51,50,68,43,86,54,97" >
  </map>

  <div id="data">Здесь выводимые данные ajax'ом</div>

a.php - a suggested handler file, if needed

Answer 1

Managed myself. If anyone needs:
html

<div class="map">
    <img src="img.png" class="map maphilighted" usemap="#simple">
  </div>

  <map name="simple">
    <area id="first" class="all" shape="poly" coords="78,14,75,29,71,3,20,96,28">
    <area id="second" class="all" shape="poly" coords="73,38,50,4,79,118,62,105,48,95,41">
  </map>

  <div class="data">
        </div>

js

$(document).ready(function(){
    $('.all').click(function() {
    	var name = ($(this).attr('id')); 
        $.ajax({
      url: 'a.php',
      method: 'post',
      dataType: 'html',
      data: {name:name},
        success: function(data){
          $('.data').html(data);
        }
    });
    return false;
    });
});

a.php

if($_POST['name'] == 'first') {
  echo 'Это первый';
} elseif($_POST['name'] == 'second') {
  echo 'Это второй';
}

Answer 2

More like a task.