473,385 Members | 1,342 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 473,385 developers and data experts.

Solution to drag and draw rectangles on an image in javascript

After hours of searching and coding, i finally have a code to drag and draw rectangles on images. I got most of the code pasted below from a post almost 2 years old and did some patch work to it. Now it works with both firefox and IE7. But with IE7, it has a minor defect...but still works. I will try to post the patch as soon as i have an answer. Here you go guys
Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3. <META http-equiv=imagetoolbar content=no>
  4. <TITLE>
  5.  
  6. </TITLE>
  7. <STYLE>
  8. #rubberBand {
  9. position: absolute;
  10. visibility: hidden;
  11. width: 0px; height: 0px;
  12. border: 2px solid red;
  13. }
  14. </STYLE>
  15.  
  16. </HEAD>
  17. <BODY>
  18. <img name="myImage" id="myImage" src="VK.jpg" height=400
  19. width=400>
  20.  
  21.  
  22. <DIV ID="rubberBand"></DIV>
  23.  
  24. <SCRIPT>
  25.  
  26. var IMG;
  27.  
  28. function startRubber (evt) {
  29. if (document.all) {
  30. // IE
  31. var r = document.all.rubberBand;
  32. r.style.width = 0;
  33. r.style.height = 0;
  34. r.style.pixelLeft = event.x;
  35. r.style.pixelTop = event.y;
  36. r.style.visibility = 'visible';
  37. IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
  38. }
  39. else if (document.getElementById) {
  40. // firefox
  41. evt.preventDefault();
  42. var r = document.getElementById('rubberBand');
  43. r.style.width = 0;
  44. r.style.height = 0;
  45. r.style.left = evt.clientX + 'px';
  46. r.style.top = evt.clientY + 'px';
  47. r.style.visibility = 'visible';
  48. r.onmouseup = stopRubber;
  49. }
  50. IMG.onmousemove = moveRubber;
  51. }
  52. function moveRubber (evt) {
  53. if (document.all) { // IE
  54. var r = document.all.rubberBand;
  55. r.style.width = event.x - r.style.pixelLeft;
  56. r.style.height = event.y - r.style.pixelTop;
  57. }
  58. else if (document.getElementById) { // firefox
  59. var r = document.getElementById('rubberBand');
  60. r.style.width = evt.clientX - parseInt(r.style.left);
  61. r.style.height = evt.clientY - parseInt(r.style.top);
  62. }
  63. return false; // otherwise IE won't fire mouseup :/
  64. }
  65. function stopRubber (evt) {
  66. IMG.onmousemove = null;
  67. }
  68.  
  69. function cancelDragDrop()
  70. {
  71. window.event.returnValue = false;
  72. }
  73.  
  74. IMG = document.getElementById('myImage');
  75. IMG.onmousedown = startRubber;
  76. IMG.onmouseup = stopRubber;
  77.  
  78. </SCRIPT>
  79. </BODY>
  80. </HTML>
  81.  
-- edit by iam_clint: thanks for posting possibly put a link to an example of it in action.
Apr 26 '07 #1
1 19991
To work in newer versions of Firefox where dragging back across the rectangle (to make it smaller) causes evens to flow to the "band" you want to add the following code:

Expand|Select|Wrap|Line Numbers
  1. var band =  document.getElementById('rubberBand');
  2. band.onmousemove = moveRubber;
  3.  
Nov 16 '10 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

26
by: Oplec | last post by:
Hi, I am learning standard C++ as a hobby. The C++ Programming Language : Special Edition has been the principal source for my information. I read the entirety of the book and concluded that I...
1
by: portraitmaker | last post by:
I found some drag and drop code on the web and modified it a little b taking out some of the stuff I didn't need. This sample allows you to drag an image in a table to another positio and swaps...
21
by: DraguVaso | last post by:
Hi, I have an inherited DataGrid, that does lots of extra stuff. For exemple drawing a backgroundimage in every cell. The problem is that it's taking too much time (using gdi+), so I want to do...
1
by: Rob Richardson | last post by:
Greetings! I am creating a form that will contain information that will eventually be on a label. The label has a 2-column table with lines separating the cells. I want my form to resemble the...
8
by: ericgorr | last post by:
I have the following test page: http://ericgorr.net/test.html <html> <head><title>Simple JavaScript</title></head> <BODY ondragstart="alert(event.srcElement.tagName)"> <INPUT TYPE=text...
2
by: Abraham Durceau | last post by:
Hi, everybody! I want to implement in JScript an image-dragging functionality like the one in image processing apps like Adobe Photoshop etc., when: a) I press a left button when a cursor is...
5
by: lgeastwood | last post by:
I have tweaked the PictureBox97.mdb (Stephen Lebans <www.lebans.com>) code to nicely draw lines, rectangles and circles to the specs that I input. I'm at a loss though with trying to setup an...
7
by: raala | last post by:
Dear experts, Iwant t,o 1.open an existing image (in the form i need browse button from with i should be able to locate the file) 2.Draw some rectangles on it. 3.save new image as a jpeg also...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.