Using area of an image as submit

I'm building a script for a Darts scoreboard, where you can click on the thrown box of the dartboard, so It can count how many points you've thrown. But to make this possible I need to post to a certain area of the image (dartboard). So I think every box of the dartboard must be a submit button. Here is the part of script I already have (buttons: Bullseye, Bull, 20, D20, T20). I can already click on them, but I can only refer to a hyperlink (href). So my question is how can I post to a certain area of an image or make certain areas the image as submit buttons.

My script:

<img src="dartbord.png" width="600" height="600" alt="Dartbord" usemap="#darts">
<map name="darts">

<area shape="circle" coords="300,300,11" alt="Bullseye" href="darts.php">
<area shape="circle" coords="300,300,23" alt="Bull" href="darts.php">
  <area shape="poly" coords="280,172,300,170,320,172,321,160,300,158,278,161" alt="Triple 20" href="darts.php">
  <area shape="poly" coords="300,300,334,90,267,90" alt="20" href="darts.php">
  <area shape="poly" coords="267,90,300,87,334,90,335,77,300,74,265,77" alt="Dubbel 20" href="darts.php">

</map>

Solution

You need to use Javascript for this. Just give a seperate ID for every area of your image map and trigger a script to do whatever you want on a click event on the respective area.

Example Fiddle here

Code snippet as follows...

    $("area").on('click', function(e) {
      document.getElementById("textfield").value = $(this).attr("id");
      console.log($("#textfield").val());
      /* over here you can have what ever javascript you want to do with data manipulation */
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="" method="post" id="formthis">
  <input type="text" id="textfield" size="25" value="TextField" />
</form>

<div>
  <img id="mandala_img" src="https://i.sstatic.net/A690W.png" width="600" height="541" usemap="#mandala_map" />
  <map name="mandala_map" id="mandala_map">
    <area shape="poly" coords="310,10,422,33,498,87,430,154,383,121,310,106" href="#area_image1" id="area_image1" />
    <area shape="poly" coords="498,87,430,154,479,274,576,274,557,178" href="#area_image2" id="area_image2" />
    <area shape="poly" coords="479,275,576,275,553,383,499,462,430,393,463,348" href="#area_image3" id="area_image3" />
    <area shape="poly" coords="499,462,430,393,310,442,310,540,420,516" href="#area_image4" id="area_image4" />
    <area shape="poly" coords="310,442,310,540,206,518,124,462,192,393" href="#area_image5" id="area_image5" />
    <!-- only using 5 areas instead of 8 , starting from the top middle going clockwise -->
  </map>
</div>

Now this is just a proof of concept. If you want form submission you can do that using JS as well or you just want to display a score, which does not seem like you need a back-end submit of a form, you can just write your script to display the score.

Hope this helps. Happy Coding :)