Jimbo

For the site I'm currently working on, I'm trying to fix some JavaScript code that lets the user draw a box (a <div> with a border and transparent background) over an image. The box is resized via the onmousemove handler. It works by having the user click once, then move the mouse to another point (the opposite corner) and click again to pin the box down, if you will. The current code has equivalent onmousemove events defined for both the <img> and the <div> on top of it; the problem is that if the mouse moves slow enough (keeping the mouse coordinates inside the border), the user can make the <div> extend beyond the regions of the <img>.

What I would like to do is simply have the mousemove propagated to the <img> and then remove the handler from the <div>. This would restrict the box to being over the image no matter what, but if I just remove the handler, the mousemove event is stopped at by the <div> when the mouse backtracks, so the user can't shrink the box. The problem is that I don't know how to make the event propagate. I've spent a long time with google and nothing really says how to do what I want. Is there a way to do this?

Arevos

Why not just have a simple check to see if the mouse coordinates are still over the image before resizing the div? Prototype has a function that does just this, if I recall correctly.

Jimbo

I did that to check the width, but the image is not completely absolutely positioned (theImage.style.left is set but not theImage.style.top), so I don't know what range of vertical coordinates is. Unless there's a way to have the browser return that value without having to set it? And account for any scrolling that might occur?

Arevos

Check out the Prototype javascipt framework. It's widely used, available as a single js file, and adds a number of extensions to the basic Javascript library, including functions to handle forms, element positioning, classes and functional programming.

In your case, the Position.within function would seem to be the one to use. Perhaps something like:
Note that the above code isn't tested; it's just to give you an idea of what I mean.

Also note that $() is a wrapper around document.getElementById() provided by Prototype.

Jimbo

Thanks Arevos, that seems to be working perfectly