measuring distance on an image

[GateKeeper]

I am curious if there is a way to measure the distance between two points on an image. For instance, if the image were a map of some place like a state or country, the user would be able to left click and hold, then move the mouse to another point which would cause a portion of the page to display the distance traveled without there being a drag and drop problem. If anyone has any insights on this, I would love to hear them.

GateKeeper

[Exodious]

just so u know and ur thread stays alive :)

[ConfusedOfLife]

I think you have to use the onclick event for your picture, whenever it's triggered, you have to store the X and Y coordinates of the mouse pointer, and you also need to use an "onmouseup" event handler for that image, that when the user leaves the mouse, you get the X & Y coordinates of your mouse again, first calculating if it's in your image or not ( maybe the user left the key somewhere out of your image area! you can do that by checking if the X coordinate of the mouse pointer is between the style.left and style.right of the image, consequently you can do the same for the Y, checking if it's between the style.top and style.bottom of the image), then if it's in your image area, I think you know how to get the distance! ( that old mathematic formula! the radical of ( (X - X0)in power 2 - (Y - Y0) in power 2 )

( This forum has to make a way for typing at least some basic mathematical operators!)

If you wana show the distance WHILE the person is moving his mouse, you have to put all this process in a function that is excecuted with an interval ( by setTimeout inside of the function ). I think it works! But the matter is that I just think!

[GateKeeper]

I kinda figured it would be all involved like that. It was an idea that just kind of hit me as an added little feature to the web pages I am trying to put together. I will fiddle around with it for a while and see what I come up with. My biggest obstacle will be trying to set it up so that it avoids any links involved in the image mapping that is going on as well. Thanks for the input though.

GK

[ConfusedOfLife]

check this out:

<a href="http://www.codingforums.com" onclick="return false">
Coding Forums
</a>

if you click on Coding Forums, your link doesn't work! You know why! so, you can put an if in that onclick that if the area that was clicked on is in your image map, well, then it returns false, if not...