• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 285
  • Last Modified:

JavaScript/jQuery: Get Position of Image on Right Click

When an image is right-clicked on, I want the position of the image to be returned in an alert.

The problem with my code below is that the position right-clicked on does not actually correspond to the actual position of the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head> 
<body> 

<style type="text/css"> 


span {
 width: 620px;
 display: block;
 float: left;
 padding: 0;
 border: 0;
 margin: 0;
 position: relative;
}

img {
 display: block;
 border: 0;
 margin: 0;
 padding: 0;
 float: left;
}

h1 {
width: 200px;
height: 500px;
float: left;
}

</style>


<h1>Hello</h1>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Magnolia_grandiflora_-_flower_1.jpg/250px-Magnolia_grandiflora_-_flower_1.jpg" alt="1"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Lynx_in_forest.jpg/400px-Lynx_in_forest.jpg" alt="2"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Honeybee_landing_on_milkthistle02.jpg/300px-Honeybee_landing_on_milkthistle02.jpg" alt="3"/>
</span>
</p>

<script type="text/javascript">
/*<![CDATA[*/


    $('p img').bind("contextmenu", function (e) { 
	alert(  e.pageX + ', ' + e.pageX  );
    });



/*]]>*/
</script>

</body> 
</html>

Open in new window

0
hankknight
Asked:
hankknight
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
You may use : $(this).offset()

http://api.jquery.com/offset/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head> 
<body> 

<style type="text/css"> 


span {
 width: 620px;
 display: block;
 float: left;
 padding: 0;
 border: 0;
 margin: 0;
 position: relative;
}

img {
 display: block;
 border: 0;
 margin: 0;
 padding: 0;
 float: left;
}

h1 {
width: 200px;
height: 500px;
float: left;
}

</style>


<h1>Hello</h1>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Magnolia_grandiflora_-_flower_1.jpg/250px-Magnolia_grandiflora_-_flower_1.jpg" alt="1"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Lynx_in_forest.jpg/400px-Lynx_in_forest.jpg" alt="2"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Honeybee_landing_on_milkthistle02.jpg/300px-Honeybee_landing_on_milkthistle02.jpg" alt="3"/>
</span>
</p>

<script type="text/javascript">
/*<![CDATA[*/


    $('p img').bind("contextmenu", function (e) {
		var pos = $(this).offset();
		//var pos = $(this).position();
		alert(  "x : " + pos.left + '\ny : ' + pos.top  );
    });



/*]]>*/
</script>

</body> 
</html>

Open in new window

0
 
hankknightAuthor Commented:
That code gives the position of the image.  It returns the same value regardless of where on the image you click.

I want it to return 0,0 ff you click an the top of any image, and 100,100 if you click 100 px down and over on any image.
0
 
leakim971PluritechnicianCommented:
Using : (e.pageX - pos.left )
And : (e.pageY - pos.top)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head> 
<body> 

<style type="text/css"> 


span {
 width: 620px;
 display: block;
 float: left;
 padding: 0;
 border: 0;
 margin: 0;
 position: relative;
}

img {
 display: block;
 border: 0;
 margin: 0;
 padding: 0;
 float: left;
}

h1 {
width: 200px;
height: 500px;
float: left;
}

</style>


<h1>Hello</h1>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Magnolia_grandiflora_-_flower_1.jpg/250px-Magnolia_grandiflora_-_flower_1.jpg" alt="1"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Lynx_in_forest.jpg/400px-Lynx_in_forest.jpg" alt="2"/>
</span>
</p>

<p>
<span>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Honeybee_landing_on_milkthistle02.jpg/300px-Honeybee_landing_on_milkthistle02.jpg" alt="3"/>
</span>
</p>

<script type="text/javascript">
/*<![CDATA[*/


    $('p img').bind("contextmenu", function (e) {
		var pos = $(this).offset();
		alert(  "x : " + (e.pageX - pos.left )+ '\ny : ' + (e.pageY - pos.top)  );
    });



/*]]>*/
</script>

</body> 
</html>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now