- For individual users
- Instant access to solutions
- Ask your tech questions
- Start your 30-day Free Trial
Main Topics
Browse All Topics
This is more an urgent question than a difficult question. I'm dealing with several different web browsers and I'd like to keep the code as clean as possible. That being said I know you guys to be good at that - so here I am.
What I have is an image on a webpage. I need to capture where the user clicks in the image. I would use an image map, but I need to capture the event with javascript NOT a page refreshing a href. If you know of a way to capture the mouse click position with an image map without a page refresh I'm all ears.
My end goal for this question is being able to get where the user clicked on an image. The rest of the math is not browser specific and calls a php script to generate a new image. (Think mapquest or google map - I've intentionally not viewed their websites as this is a standalone project and I want to do it my way.)
My current solution works for IE (so long as the user doesn't scroll the page down - an unacceptable bug), Mozilla and Safari (although it might share the IE bug).
If the code is nessisary - you can view it live at
www.ninja250.org/map
The important parts are:
Here's how I trigger the function that gets the mouse click position, I wrap an
a href around an image that I want to watch.
<a href="#" onClick="mapClick(event); return false;">
<img src="map.php?lat=0&long=-9
</a>
To get the absolute position clicked within the picture I subtract the pictures
top left position from the position clicked within the page - leaving me with a value between 0 and the images width.
// MOZILLA then IE
mapImage = document.images['map_img']
xClick = e.pageX ? (e.pageX - getImagePageLeft(mapImage)
yClick = e.pageY ? (e.pageY - getImagePageTop(mapImage))
To get the images positon on the webpage I've used a little script. I'll show the x version as it's the same for the y version. (Remember the NS4 version works fine for mozilla - even when the page is scrolled down, the IE4+ version breaks when
the page is scrolled.
var x, obj;
if (NS4) {
if (img.container != null)
return img.container.pageX + img.x;
else
return img.x;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
If anyone could help me get the position clicked on the image in a cleaner and more bug free mode I'd love to give you some points.
Thanks all!
Woot.
This question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Business Accounts
Answer for Membership