473,657 Members | 2,395 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Solution to drag and draw rectangles on an image in javascript

1 New Member
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 20040
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
3139
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 had done myself a disservice by having not attempted and completed the exercises. I intend to rectify that. My current routine is to read a chapter and then attempt every exercise problem, and I find that this process is leading to a greater...
1
1849
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 the images. Rather than just swap the images I would like t have it insert the image and move the other images down one position (or up) What would be even better is to have a radio button to specif whether you want to swap or insert the image. ...
21
3065
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 it using DirectX. I downloaded already the DSK etc, but I can't find how I need to draw an image on a given position. I don't need stuff to write advanced 3D-games, just painting that image. Can anybody help me with this? I'm already looking for...
1
3420
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 label, so I want to draw a rectangle and lines on my form. I don't want them to have any user interaction whatever. They would be there just to look pretty. There's plenty of support for drawing rectangles from code. There seems to be support...
8
4546
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 VALUE="Select and drag this text"> <SPAN >Select and drag this text</SPAN> <TEXTAREA>Select and drag this text</TEXTAREA>
2
4054
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 over the image (say, x0,y0). b) Holding a button, I start dragging. An image 'sticks' to a cursor and moves with it. c) When I release a button, an image has to reside in (x1,y1) until I want to drag it again.
5
9232
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 Ellipse Drawing Function. The following code I found on Google works in VB5 and draws an ellipse shape no problem using the Circle Method. Private Sub cmdDrawEllipse_Click() Dim X As Long, Y As Long Dim ElipseWidth As Integer, ElipseHeight As...
7
9997
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 by browsing and locating the plase plz give me steps and codes.
0
8310
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8732
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8503
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
7330
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6166
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5632
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4155
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
1955
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1615
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.