Question

我正在为Darts记分牌构建一个脚本，您可以在其中点击飞镖靶的投掷框，这样它就可以计算您抛出的点数。但为了使这成为可能，我需要张贴到图像的某个区域（飞镖）。所以我认为飞镖靶的每一个盒子都必须是一个提交按钮。这是我已经拥有的脚本部分（按钮：Bullseye，Bull，20，D20，T20）。我已经可以点击它们，但我只能引用超链接（href）。所以我的问题是如何将图片发布到图像的某个区域或将图像作为提交按钮的某些区域。

我的剧本：

<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来执行此操作，或者您只想显示一个分数，这似乎不需要您提供表单的后端提交，您只需编写脚本即可显示分数。< / p>

希望这会有所帮助。 快乐编码：）

使用图像区域作为提交

1 个答案: