New Comer (less than 5 posts)
Images and boxes
I want to display an image on a page (easy). I then want the user to draw a rectangle on the image. I need to know the co-ordinates of the rectangle. Could someone point me in the right direction.
If I have posted to the wrong group, Sorry - please point me in the right direction.
Global Moderator
Maybe you don't need to know the coordinates of the rectangle. What do you mean by draw? Consider this simple example, the image has native dimensions of 225x140 (if using a different sized image, adjust the table cell's dimensions accordingly):
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body><table style="border-collapse:collapse;"><tr><td style="width:152px;height:237px;text-align:center;vertical-align:middle;"> <img id="boxer" src="thumb2/photo9.jpg"></td></tr></table> <input type="button" value="Box It!" onclick="document.getElementById('boxer').style.padding='5px';document.getElementById('boxer').style.border='1px solid black';"> </body> </html>
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
Poor spec
First off thanks for the reply.
Unfortunatley may initial post was not very clear.
I want the user to click on an image and then drag the cursor to draw a box from the point clicked. I then want the co-ordinates of the box drawn.
Global Moderator
How much do you have so far? In any case, you will most likely need to access the mouse coordinates. Here is some very good background on that:
http://www.quirksmode.org/js/events/mouseposition.html
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
New Comer (less than 5 posts)
I do not have anything at the moment only an idea.
I am not expecting someone to write the code for me just some pointers in the right direction.
Is what I am trying to do possible in javascript or should I be looking at writing an applet or use some other technology ?
Global Moderator
Well, the link I specified in my last post might be useful then. Also, this drag and drop suite has some interesting options, one is the ability to drag and resize instead of drag and drop when holding down the ctrl or shift key while dragging, if you adapted that to a transparent.gif with a 1 or 2 pixel border applied via style, it might just be almost what you are looking for. If set-up/modified as I envision, the overlay gif image could be display none until the image you are working with on the page is clicked. Then as long as the mouse is down over the overlay, dragging could resize or move it, its border should resize right along with it but, since it is style, not get distorted, as an image would. Not exactly drawing a box but, would allow the same net result. Since this script suite also works with divisions (not sure about the resizing part with divisions though), you may be able to use an empty division with a border and skip the transparent .gif for that part. I believe the script also has code hooks to get the dimensions and position of the dragged, resized element on the fly, perhaps also of use to you.
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Posting Permissions
Reply With Quote
Bookmarks