This is the keypad image. I can find out the coordinates of the numbers. But i am facing issues in click at that particular coordinate in the image. So Can anyone please help me out to click at particular coordinate of image in javascript. Thanks in advance.
How about using <map> <area> Each button is now an anchor. Added a little JS that'll alert which button is clicked by it's 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="https://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>
You can use html map tag, refer here for documentation. Basically, you will need to define shape area of your keypad. Then you can use it with javascript. You also can use tool to map your keypad image i.e this tool.
You can use the Event Object's clientX and clientY to get the coordinates of your click, and then substract the coordinates of the image corner.
HTML
<img id="keys" src="https://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
Here's a JSFiddle.
You have to set the image as a div background, then you'll have to take the mouse coordinates inside that div when clicked (see Get mouse position within div? for mouse coords within div). Given that your image has 200px width and that you have 5 columns of digits, that means that the key '0' is between 0px and 40px, key 1 is between the 40px and 80px, etc (same for rows). Now you have the top, right, left and bottom bound for each digit, therefore, knowing the coords of your mouse you should be able to identify a particular key.
A simple and a proper way is to use image map
So you can do something like this:
$(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="https://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>