CODEWITHSUNDEEP
jquery
user3640494
user3640494

Reputation: 61

How to get the pixel postion relative to particular div/image (not the screen)

I am using following php code

<img class="hover" src="img/large_eyeball.png" style="margin-left:100px;">
<div id="co"></div>

<script type="text/javascript" src="js/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="js/hover_text.js"></script>

Here are the contents of hover_text.js:

$('.hover').mousemove(function(e) {
    $('#co').text('x: '+ e.clientX + 'y: ' + e.clientY);    
});
$('.hover').click(function(e) {
    alert('x: '+ e.clientX + 'y: '+ e.clientY);
});

Using above code I'm able to get the pixel position but relative to the very left and very top of the screen; I want to get it relative to image boundary.

Upvotes: 1

Views: 137

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78580

One way you could do it is by using the offset() function. (There might be a better and more direct method, however).

$('.hover').mousemove(function(e) {
    var out = 'x: '+ (e.clientX - $(this).offset().left) + 'y: ' + (e.clientY - $(this).offset().top);
    $('#co').text(out);    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="hover" src="//placehold.it/100x100" style="margin-left:100px;">
<div id="co"></div>

Upvotes: 1

Related Questions