how to draw a rectangle over an image???

Hi.

I need that the users of my site be able to draw a rectangle over an image (a country map) with the mouse, and also get the x0,y0 and x1,y1 coordinates of the rectangle.

thanks

andres garcia
hadden1980Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

cirtapCommented:
Hi Andres,

in your HTML you need some of this

<image
   onmousdown="recorder()"
   onmouseup="recorder()"
   src"=map.jpg" name="map" width="#" height="#">

<img id="pseudoBorder" src="blank.gif" border="1">


and in a script:

var rect = {x=0,y=0,w=0,h=0}; // will hold the coordinates

  // THIS IS DUMMY CODE && NON FUNCTIONAL !! //
  // THIS IS DUMMY CODE && NOT WORKING !! //

function recorder(eve) {
// eve == global event object that holds ALL you need to know
// on whatthe user did with the mouse and on your page

  if (window.event) eve = window.event; // the MSIE way
  if (eve) { // seems like an event has occured
     // get the mouse-coords *)
     if (eve.type=="mousedown") {
        rect.x = eve.offsetX;
        rect.y = eve.offsetY;
     } else if (eve.type=="mouseup") { // or "ondrag" or "mousemove"
        rect.w = eve.offsetX;
        rect.h = eve.offsetY;
     }
   bImg = document.getElementById("pseudoBorder")
// upper left corner of map
   mapX = document.images["map"].offsetLeft
   mapY = document.images["map"].offsetTop
// position pseudo-border image
   with (bImg.style) { // sort of
     .left = mapX + rect.x+"px"
     .top = mapY + rect.y+"px"
     .width = mapX + rect.w+"px"
     .height = mapY + rect.h+"px"
   }
  }
}

*) this is the interesting part as it varies for Netscape and MSIE and... I'm too tired now, to find the spec and get the correct property names for all of them and do all the math.

But...
Both browser save the name of the event that occured (mousedown, mouseup, ondrag ...) in the Event object (eve here) so you can find out if you need to get x1,y1 (in mousedown) or x2,y2 (in mouseup).

The rect-object I created "on the fly" is just a litte helper I often use for square things, you may of course use four variables x,y,w,h or what ever.

The coordinates of the mouse are given in either
  eve.x
  eve.y
or
  eve.mouseX
  eve.mouseY
this is what YOU should look up in the docs (see links below)

then do the math for the position of the "bordered" square, a simple blank gif with a "natural" border should do.
If you can get the relative x-y values from inside the map image only, you need to add the position of the map's left upper corner - of course.

I'd recommend to have the click TWICE: once for the upper left corner and the 2nd time for the lower right corner, this way you may grab the mouseover event and donÄt have to deal with ondrag etc. -- I doubt the'd work anyways. With this method you'd need a "click counter" that keeps track of how often the user has clicked.

DOCS + SPECS
MSIE Events @ MSDN
DHTML: http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp
Events: http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp
and more in the navigation frame in MSDN library

NS6/7 DOMEvents: http://www.mozilla.org/docs/dom/domref/dom_event_ref.html
Dom Reference: http://www.mozilla.org/docs/dom/domref

ok - I'll take a nap (GMT 2:30AM)

hasta so longa
CirTap
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jaysolomonCommented:
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: cirtap {http:#8107573}

Please leave any comments here within the next seven days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.