làm thế nào để có được cordinates chỉ trong cột cụ thể trong một hình ảnh của một lưới

Question

là nó có thể nhận được cordinates từ một cột cụ thể từ một hình ảnh như nó sẽ nói khi tôi di chuột qua cột 1 nó sẽ cho tôi nó như cột 1 cordinate 1,1 và sau đó tôi di chuột qua cột 2 nó sẽ cho tôi nó giống như cột 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) { 
 
\t window.current_x = Math.round(event.pageX - $('#image').offset().left); 
 
\t window.current_y = Math.round(event.pageY - $('#image').offset().top); 
 
\t window.current_coords = window.current_x + ', ' + window.current_y; 
 
\t $('#image_coords_now').html('Column: ' + window.current_coords + '.'); 
 
    }).mouseleave(function() { 
 
\t $('#image_coords_now').html('&nbsp;'); 
 
    }).click(function() { 
 
\t $('#image_coords_click').html('Last click: ' + window.current_coords + '. '); 
 
    }); 
 
</script>

Answer 1

thử xem này: 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'); 

} 

ý tưởng của tôi là:

• tôi xác định cell1, tọa độ '{x0: 21, y0: 25, x1: 163, y1: 165};'
• tôi lấy tọa độ tại thời điểm nhấp chuột

• nhấn nút, kiểm tra xem các tọa độ là bên trong cell1 xác định bởi tôi

  1. đi đến tế bào một
  2. nhấp chuột với chuột
  3. Nhấn nút
  4. xem bảng điều khiển

Tôi nghĩ rằng nó chỉ vào một ô, nó cuối cùng sẽ được áp dụng cho các tế bào còn lại, nhưng đó là một công việc lớn

MÃ MỚI:jsfiddle

1. nhấp chuột vào ô bạn muốn