时间戳

首页 > 解决方案 > 通过图像映射区域填写输入字段

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

问题描述

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

图像映射在四个扇区中

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

标签： javascripthtmlimagedictionaryarea

解决方案

几乎就在那里 - 你需要 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>

推荐阅读