?
Solved

how to draw a rectangle over an image???

Posted on 2003-03-10
3
Medium Priority
?
2,085 Views
Last Modified: 2012-06-27
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
Comment
Question by:hadden1980
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 5

Accepted Solution

by:
cirtap earned 500 total points
ID: 8107573
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10113777
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question