United3dArtists Archive

Any advice about this appreciated.

I'm trying to use Javascript to make a rubber rectangle or rubber band over an image to select an area for cropping.

- I know very little about Javascript.
- I found a free script that looks like it can be modified.

The artist should be able to see his uploaded picture, left click and drag to select an area within it, then click a form button to send it.

The construction of image and rubber band object(s) will be in a table within a form.

How can I limit the rubber band to appear and function only over the image? Can I set or find the image's exact coordinates? Then I could change the rubber band move function to just not exit the picture.

How can I ensure that the rubber band's coordinates align precisely with the image's?

Can I use coordinates that are relative the image's origin?

Any advice about how to get the image under the rubber band DIV? What object should hold the image?

Can I use something like SomeFormObject.setAttribute('SomeAttribute', 'SomeValue'); to set values that will appear as form parameters to a Perl script when the form is submitted? That's to send the corners of the selected area through.

Can I set the onMouseDown event that starts the rubber band just for the image object?

The test page:
http://www.phosphorgallery.com/spg/RubberBand_TEST.html"
Left click and drag to get a rubber rectangle.

The script:
http://www.phosphorgallery.com/spg/RubberBand_TEST.js"

Now the image is a background for a DIV.

The script uses document.onselectstart = function(){ return false } to prevent selection or dragging of the image while the rubber band is working. That works fine for IE but not for Firefox.

I tried using -moz-user-select:none in the style but when the start and end corners of the rubber band are outside of the image then Firefox still drags the image on the next click inside of the image.

Any ideas on how to prevent Firefox from dragging the image?