JS drawing rectangles. Can't redraw over an old rectangle

Question

I edited the title. Also, if I try to drag again over the rectangle that is being drawn to shrink it, it won't update. I think the problem is related to the fact that the rectangle is a different element from the image (a child maybe). So maybe the solution would be to have the same events for the children? I attempted to do something like this but still having problems. Feel free to change anything in the code.

 <HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>
 
</TITLE>
<STYLE>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</STYLE>
 
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="VK.jpg" height=400
width=400>
 
 
<DIV ID="rubberBand"></DIV>
 
<SCRIPT>
 
var IMG;
 
function startRubber (evt) {
if (document.all) {
// IE
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
}
 
function cancelDragDrop()
{
window.event.returnValue = false;
}
 
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
 
</SCRIPT>
</BODY>
</HTML>

Why are you showing your server-side code on a client-side question? — Diodeus - James MacFarlane, Jul 23 '13 at 15:36
What i included is html and javascript. Aren't they all client-side? — Abdul Rahim Haddad, Jul 23 '13 at 18:16

score 0 · Accepted Answer · edited May 23 '17 at 10:32

0

OK - what is going on is that your div is blocking mouse events from reaching the img, so all you need to do is disable mouse events for the div in the CSS, and you're done:

<STYLE>
#rubberBand {
    position: absolute;
    visibility: hidden;
    width: 0px; height: 0px;
    border: 2px solid red;
    pointer-events:none;
}
</STYLE>

Ref: Ignore mouse interaction on overlay image

edited May 23 '17 at 10:32

Community

1
1

answered Jul 23 '13 at 20:09

Emo Mosley

525
3
9

JS drawing rectangles. Can't redraw over an old rectangle

1 Answers1