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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [jQuery] Mouse coordinates over image

    Hey all,

    I am currently trying to work out how to get the mouse coordinates over a specific image. Eg. I have an image with 550 x 400 px. If I click on the image I would like to get the position of the mouse relative to the top left corner of the image, not the entire page.

    I have looked at http://docs.jquery.com/Tutorials:Mouse_Position and thought at first that the last code snippet on the page would help me solve my problem. However the coordinates I got from that were outside the dimensions of my image.

    Hope someone has some ideas, as I have currently hit a dead-end...

    Frank

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Basically yes. And that is the code from the jQuery documentation I already tried. But because my image isn't the only element inside the body tag it doesn't work.

    So what I get is the following:

    e.pageX: 412
    this.offsetLeft: 163
    x: 249

    e.pageY: 340
    this.offsetTop: 5
    y: 335

    The image that was tested on is only 100 x 75...

    So I guess the code the jQuery docs and you provided don't seem to work when the image is nested within multiple divs.

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Can we see the code you use? (Preferably a complete working test site) Seems like something is missing from the code, or you're pointing the click function to the wrong location. Probably why you're getting strange effects... but can't really be a bit more specific unless we see the code you're using (HTML mark-up included), because I did test this code with different images and it seemed to work just fine.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfo I can't provide you with a live version. Can give you the code though.

    Code:
    <body>
    <div id="page">
    	<div class="container">
    		<div class="list_view" id="files">
    			<div class="object_list">
    				<h2 class="section_name">
    					<span class="section_name_span">Fotos</span>
    				</h2>
    				<table id="gallery_thumb_view">
    					<tbody>
    						<tr>
    							<td><a href="/path/to/image.jpg" rel="lbox" title="image"><img src="/path/to/image.jpg" class="tagable"/></a></td>
    						</tr>
    					</tbody>
    				</table>
    			</div>
    		</div>
    	</div>
    </body>
    and the js so far:

    Code:
    if (jQuery) (function($){
    
    	var opts;
    
    	$.fn.imagetagging = function(options){
    		// build main options
    		opts = $.extend({}, $.fn.imagetagging.defaults, options);
    
    		// initalize the tagging
    		$.fn.imagetagging.initialize();
    
    		return this.each(function(){
    			$(this).click(function(e){
    
            		var x = e.pageX - this.offsetLeft;
    				var y = e.pageY - this.offsetTop;
    
    				alert(e.pageX + '-' + this.offsetLeft + '=' + x + "\n" + e.pageY + '-' + this.offsetTop + '=' + y);
           		});
    		});
    	};
    
    	$.fn.imagetagging.initialize = function(){
    	};
    
    	$.fn.imagetagging.tag = function(o) {
    
    	};
    
    	$.fn.imagetagging.defaults = {
    	};
    
    })(jQuery);
    and calling it by:
    Code:
    $(document).ready(function() {
      $('.tagable').imagetagging();
    }

    Hope this helps.

  • #6
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    It does help. For instance, offsetLeft/offsetTop are zero in a situation where you don't have them set via CSS, example:

    Code:
    <style type="text/css">
    .tagable {
        position: absolute;
        top: 50px;
        left: 100px;
    }
    </style>
    Which in turn will need some playing around with to position the image where you want it... sadly, with the script in question, that is how you need to do it. I'll see if I can come up with something that doesn't rely on those values.

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And here it is...

    Code:
            var pos = $(this).position();
            pos.left = parseInt(pos.left); //parseInt needed due to position() returning a float, rather than an int.
            pos.top = parseInt(pos.top);
            var x = e.pageX - pos.left;
            var y = e.pageY - pos.top;
    Which in turn shouldn't rely on the element's CSS offset. Hope this helps. Enjoy.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Eldarrion. That solution almost works. The x-coordinate is spot on.

    If you have previous elements before the page-div, you need to calculate the "offset" of the div in question ("page").

    I solved this manually by using:

    Code:
    var offset = $('#top').height() + $('#tabs').height() + $('#page_header_container').height();
    Do you know of a neater way?

    The complete structure is:
    Code:
    <body>
    	<div id="top">...</div>
    	<div id="tabs">...</div>
    	<div id="page_header_container">...</div>
    	<div id="page">...</div>
    </body>
    Cheers

  • #9
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Hummm, it did work when I tested it with the code you provided earlier... Maybe I should have given the complete script I'm using in this case:

    Code:
    <script type="text/javascript">
    $(document).ready(function() {
    	$(".tagable").click(function(e){
    		var pos = $(this).position();
    		pos.left = parseInt(pos.left);
    		pos.top = parseInt(pos.top);
    		var x = e.pageX - pos.left;
    		var y = e.pageY - pos.top;
    	
    		alert(x + ", " + y);
    	});
    })
    </script>
    And I'm using that with the structure:

    Code:
    <body>
    <div id="page">
    	<div class="container">
    		<div class="list_view" id="files">
    			<div class="object_list">
    				<h2 class="section_name">
    					<span class="section_name_span">Fotos</span>
    				</h2>
    				<table id="gallery_thumb_view">
    					<tbody>
    						<tr>
    							<td><a href="/path/to/image.jpg" rel="lbox" title="image"><img src="/path/to/image.jpg" class="tagable"/></a></td>
    						</tr>
    					</tbody>
    				</table>
    			</div>
    		</div>
    	</div>
    </body>
    All in all, it does work... though it would definitely crash if you keep the CSS I gave you earlier... which you should remove:

    Code:
    <style type="text/css">
    .tagable {
        position: absolute;
        top: 50px;
        left: 100px;
    }
    </style>
    All in all, it acts strangely, position() not returning the proper value in this case.

  • #10
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    the structure has changed a bit (see my last post).

    Code:
    <body>
    	<div id="top">...</div>
    	<div id="tabs">...</div>
    	<div id="page_header_container">...</div>
    	<div id="page">...</div>
    </body>
    The content inside <div id="page"> is the same as you just mentioned. Only change is that there are 3 divs before with a combined height of 246px. If i subtract that 246 from the y-coordinate it is spot on. Hence my static code:

    Code:
    var offset = $('#top').height() + $('#tabs').height() + $('#page_header_container').height();
    I want to change that static way of defining the offset by a dynamic one, which get's all the div's before the page-div and sums their height.

    Tried using the .parent() and .children() function on this, but the parent is the a-tag surrounding the image tag.

    I could use $('#page').parent().children().each () but that would be kinda static, as in the next project the taggable image could be inside a different div with a completly different id.

  • #11
    Regular Coder
    Join Date
    Nov 2004
    Location
    Edinburgh, SCO
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No ideas?


  •  

    Posting Permissions

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