Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2110
  • Last Modified:

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
0
hadden1980
Asked:
hadden1980
1 Solution
 
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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now