Solved

"Draw" Rectangle using JavaScript

Posted on 2009-04-14
5
491 Views
Last Modified: 2012-05-06
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
Comment
Question by:ALawrence007
  • 3
  • 2
5 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 24138443
0
 

Author Comment

by:ALawrence007
ID: 24140119
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
 

Author Comment

by:ALawrence007
ID: 24140343
My Bad..... I found my issue......

Thanks mplungjan !!!!
0
 

Author Closing Comment

by:ALawrence007
ID: 31569909
Awesome tool and help!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24140570
you are welcome :)
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now