Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Retrieve the X,Y position on an image upon onClick event 2
- Thread starter static786
- Start date
-
1
- #2
This should be pretty cross-browser compatible:
-kaht
How much you wanna make a bet I can throw a football over them mountains?
Code:
<script type="text/javascript">
function getMouseXY(e) {
var e = (!e) ? window.event : e;
if (e.pageX || e.pageY) {
posX = e.pageX;
posY = e.pageY;
}
else if (e.clientX || e.clientY) {
if (document.body.scrollLeft || document.body.scrollTop) {
posX = e.clientX + document.body.scrollLeft;
posY = e.clientY + document.body.scrollTop;
}
else {
posX = e.clientX + document.documentElement.scrollLeft;
posY = e.clientY + document.documentElement.scrollTop;
}
}
alert("x: " + posX + "\ny: " + posY);
}
</script>
<body>
<img src="something.jpg" alt="" onclick="getMouseXY(event)" />
</body>-kaht
How much you wanna make a bet I can throw a football over them mountains?
- Thread starter
- #3
Code:
<html><body>
<form method="get" action="#">
<input type="image" src="image.jpg" width="100px"; height="100px" />
</form>
</body></html>This gives you x and y relative to the top left corner of your image and puts it in the url query string. If your question is then how to then retrieve it from the query string see faq216-5442
Hope that helps
Clive
I tested this in IE and it kept returning 2 more than what I was clicking, so in the function I subtracted 2. You may need to fudge with it some to get it to work cross-browser:
-kaht
How much you wanna make a bet I can throw a football over them mountains?
Code:
<script type="text/javascript">
function getMouseXY(e, obj) {
var e = (!e) ? window.event : e;
//find mouse coordinates
if (e.pageX || e.pageY) {
posX = e.pageX;
posY = e.pageY;
}
else if (e.clientX || e.clientY) {
if (document.body.scrollLeft || document.body.scrollTop) {
posX = e.clientX + document.body.scrollLeft;
posY = e.clientY + document.body.scrollTop;
}
else {
posX = e.clientX + document.documentElement.scrollLeft;
posY = e.clientY + document.documentElement.scrollTop;
}
}
else {
posX = 0;
posY = 0;
}
//find image coordinates
if (obj.offsetLeft || obj.offsetTop) {
xOffset = obj.offsetLeft;
yOffset = obj.offsetTop;
parentObj = obj.offsetParent;
while(parentObj != null) {
xOffset += parentObj.offsetLeft;
yOffset += parentObj.offsetTop;
parentObj = parentObj.offsetParent;
}
}
else if (obj.x || obj.y) {
xOffset = obj.x;
yOffset = obj.y;
}
else {
xOffset = 0;
yOffset = 0;
}
alert("Relative to window\n\nx: " + posX + "\ny: " + posY + "\n\nRelative to Image\n\nx: " + (posX - xOffset - 2) + "\ny: " + (posY - yOffset - 2));
}
</script>
<body>
<br><br><br><br>
<img src="something.jpg" alt="" onclick="getMouseXY(event, this)" />
</body>-kaht
How much you wanna make a bet I can throw a football over them mountains?
-
1
- #6
BillyRayPreachersSon
Programmer
If you only need this to run in IE, you can use this :
Code:
<html>
<head>
<script type="text/javascript">
<!--
function getMouseXY() {
alert(window.event.offsetX + ', ' + window.event.offsetY);
}
//-->
</script>
</head>
<body>
<img src="image.jpg" onclick="getMouseXY()" />
</body>
</html>Dan
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
- Thread starter
- #7
![[thumbsup]](/data/assets/smilies/thumbsup.gif "[thumbsup] [thumbsup]")
- Status
Similar threads
- Locked
- Question