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

【问题标题】：Fill in an input field through an image map area通过图像映射区域填写输入字段
【发布时间】：2019-07-30 05:59:29
【问题描述】：

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

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

图像被映射到四个扇区

这是脚本：（我有一个 alert('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>

【问题讨论】：

标签： javascript html image dictionary area

【解决方案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>

【讨论】：