Go Premium for a chance to win a PS4. Enter to Win

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

"Draw" Rectangle using JavaScript

Hi to all,

I am following the following post:
http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/
Where a user can basically point to an area on an image and then get the X and Y coordinates. My end goal is to give the user the ability to drag and drop an area on the image and then get the image map coordinates.

The following link basically demonstrates my end goal, but there is no drag and drop functionality. You basically have to click twice on the image and then a "White" block is drawn. I want to give the user a See through block, but with the border visible.
http://www.shawngo.com/mappr/clicktest.html

Can someone please help me in getting this done.

Code Below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript">
function point_it(event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;
document.getElementById("cross").style.left = (pos_x-1) ;
document.getElementById("cross").style.top = (pos_y-15) ;
document.getElementById("cross").style.visibility = "visible" ;
document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;
}
</script>
</head>
<body>
<form name="pointform" method="post">
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('sun.jpg');width:500px;height:333px;">
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div>
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" />
</form> 
</body>
</html>

Open in new window

0
ALawrence007
Asked:
ALawrence007
  • 3
  • 2
1 Solution
 
Michel PlungjanIT ExpertCommented:
0
 
ALawrence007Author Commented:
mplungjan:

This is EXACTLY what I was looking for and really an amazing tool!

The following is what I am looking at and exactly what needs to happen in my application:
http://marqueetool.net/examples/send-cropped-image-coordinates-to-the-server/

The only thing I am having issues with is the getCoords(). The example and documentation is not very clear on that. I followed the example, but I am not getting the desired result: The coordinates are not being populated in my input boxes.

I don't understand the code below:

Do I have to create another page?

Thanks

And on the server: <? header("Content-Type: image/jpeg"); $image = dirname(__FILE__) . "/images/examples/example5.jpg"; if ($w && $h) { $image_rs = @imagecreatefromjpeg($image); $new_rs = @imagecreatetruecolor($w, $h); @imagecopy ($new_rs, $image_rs, 0, 0, $x, $y, $w, $h); @imagejpeg($new_rs); } readfile($image); ?> 

Open in new window

0
 
ALawrence007Author Commented:
My Bad..... I found my issue......

Thanks mplungjan !!!!
0
 
ALawrence007Author Commented:
Awesome tool and help!!
0
 
Michel PlungjanIT ExpertCommented:
you are welcome :)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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