1. 首頁
  2. 問答
  3. 如何使用javascript單擊圖像的特定座標

如何使用javascript單擊圖像的特定座標

2016-02-05 59 views

回答

0

您可以使用html地圖標籤refer here作爲文檔。基本上，您需要定義鍵盤的形狀區域。然後你可以使用它與JavaScript。您還可以使用工具來映射您的鍵盤圖像，即this tool。

來源

2016-02-05 07:40:27

0

您可以使用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。

來源

2016-02-05 07:40:42 remdevtec

0

您必須將圖像設置爲div背景，然後點擊鼠標座標時需要點擊該座標div（請參見Get mouse position within div?以獲取div內的鼠標座標）。鑑於你的圖像寬度爲200px，並且你有5列數字，這意味着關鍵字'0'在0px和40px之間，關鍵字1在40px和80px之間等（對於行是相同的）。現在，您對每個數字都有頂部，右側，左側和底部界限，因此，瞭解鼠標的座標，您應該能夠識別特定的按​​鍵。

來源

2016-02-05 07:40:48 TeoMor

1

如何使用<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>

來源

2016-02-05 07:49:35 zer00ne

0

一個簡單而正確的方法是使用圖像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>

來源

2016-02-05 08:14:34

相關問題

 相關問題