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(' ');
}).click( function() {
$('#image_coords_click').html('Last click: ' + window.current_coords + '. ');
});
</script>
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:
pressing the button, check if the coordinates are inside the cell1 defined by me
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With