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
-
<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>
-
-- edit by iam_clint: thanks for posting possibly put a link to an example of it in action.
