Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get coordinates only in specific column in a picture of a grid

Tags:

jquery

is it possible to get cordinates from a specific column from a picture like it will say when i hover over column 1 it will give me it like column 1 cordinate 1,1 and then i hover over column 2 it will give me it like column 2 cordinate 1,1

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div><span id="image_coords_click"></span><span id="image_coords_now"> </span></div>
<img id="image" class="aligncenter" src="http://4.bp.blogspot.com/-c0lydOomMh8/UdMXTLn0frI/AAAAAAAAKdU/xa8kZMf23uQ/s721/100+number+grid.png" width="1475" height="1475" />
<script type="text/javascript">
  $('#image').mousemove( function(event) {
	window.current_x = Math.round(event.pageX - $('#image').offset().left);
	window.current_y = Math.round(event.pageY - $('#image').offset().top);
	window.current_coords = window.current_x + ', ' + window.current_y;
	$('#image_coords_now').html('Column: ' + window.current_coords + '.');
  }).mouseleave( function() {
	$('#image_coords_now').html('&nbsp;');
  }).click( function() {
	$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
  });
</script>
like image 309
Kewin Björk Nielsen Avatar asked Dec 20 '17 11:12

Kewin Björk Nielsen


1 Answers

try watching this:jsfiddle

function column(){
  var cell1={x0:21,y0:25,x1:163,y1:165};
var x=$('#x').html();
var y=$('#y').html();
/*
  console.log(x);
  console.log(y);
  console.log(cell1['x0']);
  console.log(cell1['x1']);
  console.log(cell1['y0']);
  console.log(cell1['y1']);
*/
if (x>=cell1['x0'] && x<=cell1['x1'] && y>=cell1['y0'] && y<=cell1['y1'])
{
console.log('cell oone');
}
else {
console.log('other cell');

}

my idea is:

  • I defined cell1, of coordinates '{x0: 21, y0: 25, x1: 163, y1: 165};'
  • I took the coordinates at the time of click
  • pressing the button, check if the coordinates are inside the cell1 defined by me

    1. go to cell one
    2. click with the mouse
    3. Press the button
    4. look at the console

I thought it only on a cell, it would eventually be applied to the remaining cells, but it's a big job

NEW CODE:jsfiddle

  1. click on the cell you want
like image 88
Leo Avatar answered Nov 13 '22 01:11

Leo