グリッドの画像の特定の列にのみ座標を取得する方法

Question

のように、特定の列から座標を取得することは可能ですか？列1にカーソルを合わせると、列1のように表示されます。 1,1、その後、私はそれがこれを見てみてください2欄コーディネート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

のように私にそれを与える2列の上にマウスを置く：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'); 

} 

私の考えである：

• I座標のCELL1、定義された '{X0：21、Y0：25、X1：163、Y1：165};'
• 私はマウス
で1回の
• クリックをセルに行く座標は私が
  1. を定義したセル1内にあるかどうかをチェックし、ボタンを押すとクリック

  2. の時に座標を取りました

  3. コンソール

01の押しボタン

外観

私はそれが唯一のセルに、それは最終的に残りのセルに適用されるだろうと思ったが、それは大きな仕事

NEW CODEです：あなたは

をしたいセルに jsfiddle

1. クリック