So here my problem:

I have an image (jpeg if it matters)

I give it 3-4 sets of coordinates (4 corners of the rectangle)

And I want to draw a rectangle on the image at those 4 coordinates.
The rectangle can either be opaque or it could just be a thin border.. either will do


The tricky part is, I want the user to be able to move each rectangle, and for the movement to update the corresponding coords in a hidden input in a form.


Thanks a lot for your help.

sorry if I wasn't specific enough

The rectangle just needs an absolute-positioned div, unless you want an angled rectangle, in which case... :eek:

For the movement you probably want to use an established dHTML api (http://www.google.com/search?q=dhtml+api) (otherwise you'll need to develop your own with onmousedown, onmousemove, onmouseup and do extensive cross-browser testing). Not sure what's best these days but there are plenty available.

Any suggestions on which dHTML api?

I need something simple, in javascript which just updates a form parameter with its current location

This is probably what you're looking for but it's a tad resource-intensive (uses 1x1 pixels to draw lines): http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Are you sure you wouldn't rather use Flash?

That works good, but it doesn't allow dragging of the rectangles and getting their coordinates.

I'm pretty sure this is possible in the same manner as "tagging a photo", but I need each rectangle to be movable at the same time, and their coords updated respectively

Thanks!

I worked on a project recently that required this type of functionality. Check this out and see if this is what your looking for:

http://www.defusion.org.uk/demos/060519/cropper.php

No, It has to be a preset rectangle of a certain size.. and the whole rectangle could be moved.

But there must be multiple rectangles at the same time on one image

No, It has to be a preset rectangle of a certain size.. and the whole rectangle could be moved.

But there must be multiple rectangles at the same time on one image

Yes, this allows you to have a preset rectangle of a certain size and you can also move the whole rectangle around. And yes you can have more then one at the same time. I did this on the project I mentioned.

Silly

Sounds good to me, where can I find the one with multiple rectangles? and pre-defined sizes?

Thanks a ton

anyone?

If it's not one of those marquee boxes, but rather an opaque box of some color (with text inside of it) it would be even better.

Thanks again!

bumppp 10char

bummpp.. cmon there has to be a way to do this

does anything like this exist?

Please guys I really need this

bump...

what im basically looking for is like a script for tagging where I can have multiple "tags" on the screen at the same time.

The user can then resize them and move them.

Then I need to pass the coords from the selected areas in a hidden form input field

Absolute positioned divs with an opacity tag (or transparent png)

EasyDrag jQuery plugin for draggable functionality

Update hidden element with positions (topX, topY, topX+width, topY+height) either onsubmit or on drop (with EasyDrag)

i would need to to be dragged and also I need to somehow mark the center of the absolute div.. with like an X or a circle or something.


thanks a lot guys