如何使用javascript单击图像的特定坐标

问题描述：

这是键盘图像。我可以找出数字的坐标。但是我在点击图像中的特定坐标时遇到了问题。所以任何人都可以请帮助我点击图像的特定坐标在JavaScript中。提前致谢。

答

您可以使用html地图标签refer here作为文档。基本上，您需要定义键盘的形状区域。然后你可以使用它与JavaScript。您还可以使用工具来映射您的键盘图像，即this tool。

答

您可以使用Event Object的clientX和clientY来获取您的点击坐标，然后减去图像角落的坐标。

HTML

<img id="keys" src="http://i.stack.imgur.com/gTiMi.png"> 
<div> 
Spot is: <span id="spot"></span> 
</div>

的JavaScript

var keys = document.getElementById("keys"); 
var keysTop = keys.offsetTop; 
var keysLeft = keys.offsetLeft; 
var spot = document.getElementById("spot"); 
document.getElementById("keys").onclick = function (event) { 
    spot.innerHTML = "(" + (event.clientX - keysLeft) + " , " + (event.clientY - keysTop) + ")"; 

// now you can ask if spot is between (0,0) and (38,38) to refer to 1 button for instance 
}

DEMO

这里有一个JSFiddle。

答

您必须将图像设置为div背景，然后点击鼠标坐标时需要点击该坐标div（请参见Get mouse position within div?以获取div内的鼠标坐标）。鉴于你的图像宽度为200px，并且你有5列数字，这意味着关键字'0'在0px和40px之间，关键字1在40px和80px之间等（对于行是相同的）。现在，您对每个数字都有顶部，右侧，左侧和底部界限，因此，了解鼠标的坐标，您应该能够识别特定的按键。

答

如何使用<map><area>每个按钮现在都是锚点。添加了一个小JS，它会提醒哪个按钮被其ID所点击。

var map = document.getElementById('Map'); 
 
map.addEventListener('click', eXFunction, false); 
 

 
function eXFunction(e) { 
 
    if (e.target !== e.currentTarget) { 
 
    var clickedBtn = e.target.id; 
 
    alert("Button: " + clickedBtn); 
 
    } 
 
    e.stopPropagation(); 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>ImageMap NumberPad</title> 
 
</head> 
 

 
<body> 
 
    <section> 
 
    <img src="http://i.stack.imgur.com/gTiMi.png" alt="" usemap="#Map" /> 
 
    <map name="Map" id="Map"> 
 
     <area id="a1" title="1" href="#" shape="poly" coords="6,4,6,36,34,34,36,4" /> 
 
     <area id="a2" title="2" href="#" shape="poly" coords="44,3,77,3,76,36,43,36" /> 
 
     <area id="a9" title="9" href="#" shape="poly" coords="82,7,115,5,117,36,82,37" /> 
 
     <area id="a7" title="7" href="#" shape="poly" coords="124,2,157,3,157,36,124,37" /> 
 
     <area id="a3" title="3" href="#" shape="poly" coords="164,5,197,3,198,37,162,37" /> 
 
     <area id="a0" title="0" href="#" shape="poly" coords="4,43,37,43,37,76,3,76" /> 
 
     <area id="a5" title="5" href="#" shape="poly" coords="44,43,77,43,76,76,44,76" /> 
 
     <area id="a4" title="4" href="#" shape="poly" coords="83,44,117,43,116,75,82,75" /> 
 
     <area id="a8" title="8" href="#" shape="poly" coords="123,44,157,42,158,76,123,76" /> 
 
     <area id="a6" title="6" href="#" shape="poly" coords="198,43,197,76,163,76,165,43" /> 
 
    </map> 
 
    </section> 
 
</body> 
 

 
</html>

答

一个简单而正确的方法是使用图像map

所以，你可以做这样的事情：

$(document).ready(function() { 
 
$(".area").click(function(e){ 
 
    e.preventDefault(); 
 
alert("You clicked :"+$(this).data("number")); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<img id="image" src="http://i.stack.imgur.com/gTiMi.png" usemap="#Map" > 
 
    <map name="Map"> 
 
    <area data-number="1" class="area" shape="rect" coords="5,5,35,30" href="#"> 
 
    <area data-number="2" class="area" shape="rect" coords="50,5,75,30" href="#"> 
 
    <area data-number="9" class="area" shape="rect" coords="90,5,115,30" href="#"> 
 
    <area data-number="7" class="area" shape="rect" coords="130,5,155,30" href="#"> 
 
    <area data-number="3" class="area" shape="rect" coords="170,5,195,30" href="#"> 
 
    
 
    <area data-number="0" class="area" shape="rect" coords="5,50,35,75" href="#"> 
 
    <area data-number="5" class="area" shape="rect" coords="50,50,75,75" href="#"> 
 
    <area data-number="4" class="area" shape="rect" coords="90,50,115,75" href="#"> 
 
    <area data-number="8" class="area" shape="rect" coords="130,50,155,75" href="#"> 
 
    <area data-number="6" class="area" shape="rect" coords="170,50,195,75" href="#"> 
 
</map>

如何使用javascript单击图像的特定坐标

相关推荐