通过图像映射区域填写输入字段

Question

我正在制作一个应用程序，为在现实生活中玩游戏的玩家填写分数。观众通过点击他在每一轮中击中的东西来跟踪他的分数。我遇到了两个问题：

如何通过单击某个区域来填写我的输入字段。
我如何从第 1 回合转到第 2 回合等等

图像被映射到四个扇区

这是脚本：（我在 ??? space 上有一个警报 ('test');，但它也不起作用。)

$("#test").on("click", function(e) {
  e.preventDefault();
  console.log("here");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>

Answer 1

差不多了 - 您需要对目标进行 jQuerify：

var cnt = 0;
$("#map").on("click", function(e) {
  e.preventDefault();
  cnt++;
  if (cnt > 3) {
    alert("You had your 3 gos");
  }  
  else {
    var $tgt = $(e.target);
    // console.log($tgt.attr("alt"));
    $("#turn"+cnt).val($tgt.attr("title"))
  }  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map" id="map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>

通过图像映射区域填写输入字段

Fill in an input field through an image map area

html

javascript

dictionary

image

area