CODEWITHSUNDEEP
javascript
rpg
rpg

Reputation: 1652

Getting image coordinates of mouse movement

I have a situation where I am clicking (mouse down) at some position (say x1, y1) on an image and the moving the mouse and releasing mouse (mouse up) at some other location (x2, y2) within the image.

I need to capture these starting and ending coordinates.

I tried with mouseup and mousedown event but it's not working. When I do the mousedown at destination it does not return anything.

var startX, startY;
var endX, endY;
if (!document.all)
    document.captureEvents(Event.MOUSEUP);
document.onmouseup = endPos;

if (!document.all)
    document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = startPos;

function startPos (event)
{
   startX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft;
   startY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop;
}

function endPos (event)
{
   endX = event.offsetX?(event.offsetX):event.pageX - img1.offsetLeft;
   endY = event.offsetY?(event.offsetY):event.pageY - img1.offsetTop;
}

Upvotes: 0

Views: 911

Answers (4)

Lion King
Lion King

Reputation: 33813

I hope that this will be what you want.

HTML:

<div id="result"></div>

Javascript

var elem = document.getElementById('result');
var startPosX = 0, startPosY = 0, endPosX = 0, endPosY = 0;
function startPos(e) {
   var eve = (e) ? e : window.event;
   var x = (eve.layerX) ? eve.layerX : eve.offsetX;
   var y = (eve.layerX) ? eve.layerY : eve.offsetY;
   startPosX = x, startPosY = y;
}
function endPos(e) {
   var eve = (e) ? e : window.event;
   var x = (eve.layerX) ? eve.layerX : eve.offsetX;
   var y = (eve.layerX) ? eve.layerY : eve.offsetY;
   endPosX = x, endPosY = y;
elem.innerHTML = 'startPos(X)= ' + startPosX + ' | startPos(Y)= ' + startPosY + '<br/> endPos(X)= ' + endPosX + ' | endPos(Y)= ' + endPosY;
}

document.onmousedown = startPos;
document.onmouseup = endPos;

Online demo Here

Upvotes: 1

Android Genius
Android Genius

Reputation: 324

Using JQuery:

$(document).ready(function(e) {
     $("div").html("CLICK ME");
     $(".box").bind("mousemove",function(e ){
         $("div").html("X="+e.pageX +"px"+'<br/>' +"Y ="+e.pageY +"px");
     });
});

Upvotes: 0

Christian
Christian

Reputation: 7429

I would suggest you do something like this:

$(function(){

var positionRequester = function(element, callback){
        var startX = 0,
            startY = 0,
            endX = 0,
            endY = 0;

       $(element).unbind("mousedown").on("mousedown",function(e){
            console.log(e);
       });

        $(element).unbind("mouseup").on("mouseup",function(e){
            callback(startX,startY,endX,endY);
        });

};

positionRequester("div",function(startX,startY,endX,endY){
    console.log(startX,startY,endX,endY);
})

});

In "mousedown" you could capture thge start point, in "mouseup" you could call the callback..

Upvotes: 0

PSR
PSR

Reputation: 40318

You can use jCrop to get this

<script type="text/javascript">

jQuery(function($){

  $('#target').Jcrop({
    onChange:   showCoords,
    onSelect:   showCoords
  });

});

// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
  alert('x='+ c.x +' y='+ c.y +' x2='+ c.x2 +' y2='+ x.y2)
  alert('w='+c.w +' h='+ c.h)
};

</script>

SEE HERE

Upvotes: 2

Related Questions