Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    get x,y coordinates of image

    Hi, just wondering if its possible to find the x and y coordinates of an image using the onmousemove method. Specifically I need to know if this can be done using onmousemove. If so, how would I put it in my img code for the image.
    If this can't be done with onmousemove, what other method would I use?

    Here's my image.
    <p><img src="assets/header.gif" width="700" height="70" </p>

  • #2
    New Coder
    Join Date
    Apr 2007
    Location
    Silicon Valley California
    Posts
    71
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do anything you want in the onmousemove method, including getting the coordinates of an image. I'm not sure what you're really trying to do. Do you want the coordinates of the mouse over the image? Here are a couple of functions that can help, one to retrieve the position of an element and the other to retrieve the position of the mouse.

    find the position of an element
    Code:
    function findPos(elem) {
    	elem = $(elem);
    	var curleft=0, curtop=0;
    
    	if (elem.offsetParent) {
    		curleft = elem.offsetLeft;
    		curtop  = elem.offsetTop;
    
    		while (elem = elem.offsetParent) {
    			curleft += elem.offsetLeft;
    			curtop  += elem.offsetTop;
    		}
    	}
    
    	return {x:curleft, y:curtop};
    }
    Find the position of the mouse
    Code:
    Event = {};
    Event.getMousePositionX = function(e) {
    	if (e.pageX) {
    		return e.pageX;
    	}
    	else if (e.clientX) {
    		return e.clientX + (document.documentElement.scrollLeft ?
    		                    document.documentElement.scrollLeft :
    		                    document.body.scrollLeft);
    	}
    	else {
    		return null;
    	}
    };
    
    Event.getMousePositionY = function(e){
    	if (e.pageY) {
    		return e.pageY;
    	}
    	else if (e.clientY) {
    		return e.clientY + (document.documentElement.scrollTop ?
    		                    document.documentElement.scrollTop :
    		                    document.body.scrollTop);
    	}
    	else {
    		return null;
    	}
    };
    
    Event.getMousePosition = function(e) {
    	return {x:Event.getMousePositionX(e), y:Event.getMousePositionY(e)};
    };
    Then if you are looking for the mouse's position inside the image subtract the mouses position from the images. For example you might use this callback function

    Code:
    var onImageMouseOver = function(e) {
    var ipos = findPos(this);
    var mpos = getMousePosition(e);
    var xpos = ipos.x - mpos.x;
    var ypos = ipos.y - mpos.y;
    }
    Code:
    &lt;img src="assets/header.gif" width="700" height="70" onmouseover="onImageMouseOver " /&gt;

  • #3
    New Coder
    Join Date
    May 2007
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •