使用图像区域作为提交

Question

我正在为飞镖计分板构建一个脚本，您可以在其中单击飞镖盘的投掷框，这样它就可以计算您投掷了多少分。但是为了使这成为可能，我需要 post 到图像的某个区域（飞镖）。所以我认为飞镖的每个盒子都必须是一个提交按钮。这是我已有的脚本部分（按钮：Bullseye、Bull、20、D20、T20）。我已经可以点击它们，但我只能引用超链接 (href)。所以我的问题是如何 post 到图像的特定区域或将图像的特定区域作为提交按钮。

我的脚本：

<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>

Answer 1

您需要为此使用 Javascript。只需为图像地图的每个区域提供一个单独的 ID，然后触发脚本在相应区域的 click 事件中执行任何您想做的事情。

示例Fiddle here

代码片段如下...

    $("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="http://i.stack.imgur.com/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>

现在这只是概念验证。如果您想要提交表单，您也可以使用 JS 来完成，或者您只想显示分数，这似乎不需要后端提交表单，您可以编写脚本来显示分数。

希望这对您有所帮助。 快乐编码:)

使用图像区域作为提交

Using area of an image as submit

html

javascript

css

image

area