View Full Version : Images and boxes

02-28-2006, 10:35 AM
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.

02-28-2006, 01:43 PM
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):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<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';">

02-28-2006, 03:25 PM
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.

02-28-2006, 03:51 PM
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:


03-01-2006, 11:06 AM
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 ?

03-01-2006, 03:09 PM
Well, the link I specified in my last post might be useful then. Also, this drag and drop suite (http://www.walterzorn.com/dragdrop/dragdrop_e.htm) 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.