...

View Full Version : Odd behavior when drawing rectangle over image



kalyson
06-14-2007, 04:39 AM
Hello,
I've been trying to figure out what is wrong with this code. Or perhaps it is a web client bug. The code works fine when there is no image underneath it. I have a map image that I insert into the body of the document, and the mouseup event seems to start failing, because the rectangle won't release when over the image.
This is the code with the image tag. If you remove the image tag, you can see that it works fine. My debugging showed mouseup events when the image was removed. (Or, just draw the rectangle away from the map -- to the right).
Thanks in advance for looking at this. I'm quite frustrated with it now.
Kris

--------------------------------------------------------------
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

var isDrawing = false;

var xHeight = 0;
var xWidth = 0;
var startX = 0;
var startY = 0;


function debug(msg) {

if (!debug.box) {
debug.box = document.createElement("div");
debug.box.setAttribute("style",
"background-color: white; " +
"font-family: monospace; " +
"border: solid; " +
"padding: 10px;");
document.body.appendChild(debug.box);

}


var p = document.createElement("p");
p.appendChild(document.createTextNode(msg));
debug.box.appendChild(p);

}//debug()


function setStartDraw(e,id) {

var currentElement=document.getElementById(id);

debug("type: " + e.type);
xHeight=0;
xWidth=0;

currentElement.style.height = xHeight;
currentElement.style.width = xWidth;


// pageX and pageY are the pixel coordinates
// at which the event occurred, relative to
// the upper-left corner of the window (NN4).
// Testing for both pageX and clientX covers
// DOM2/IE event models, as well as NN4.
if (e.pageX || e.pageY) {
startX = e.pageX;
startY = e.pageY;
} else if (e.clientX || e.clientY) {
startX = e.clientX + document.body.scrollLeft;
startY = e.clientY + document.body.scrollTop;
}


currentElement.style.top = startY;
currentElement.style.left = startX;
currentElement.style.display = 'inline';

isDrawing = true;
return false;


}//end setStartDraw()





function drawBox(e,id) {

var currentElement=document.getElementById(id);
var currentX = 0;
var currentY = 0;

if (isDrawing) {

// Get current cursor position
if (e.pageX || e.pageY) {
currentX = e.pageX;
currentY = e.pageY;
} else if (e.clientX || e.clientY) {
currentX = e.clientX + document.body.scrollLeft;
currentY = e.clientY + document.body.scrollTop;
}

// Create box dimensions

xHeight = currentY - startY;
xWidth = currentX - startX;

if (xWidth < 0) currentElement.style.left = currentX;
else currentElement.style.left = startX;

if (xHeight < 0) currentElement.style.top = currentY;
else currentElement.style.top = startY;


currentElement.style.width = Math.abs(xWidth);
currentElement.style.height = Math.abs(xHeight);

return false;


}//isDrawing()



}//drawBox()



function stopDraw(e) {

debug("type: " + e.type);

isDrawing = false;
return false;
}



function clearSelection(id) {

var currentElement=document.getElementById(id);
currentElement.style.display = none;

}







//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR='#89C5EA'
BACKGROUND='/Images/background_color.gif'
onmousedown="setStartDraw(event,'selectionBox');"
onmousemove="drawBox(event,'selectionBox');"
onmouseup="stopDraw(event);">

<div style="position:absolute;border:solid 1px #ff0000;display:none" id="selectionBox"></div>
<IMG SRC="http://newlightsoftware.com/map_ca.gif" BORDER="0">







</BODY>
</HTML>

rwedge
06-14-2007, 07:46 AM
Try:
onmousemove="return drawBox(event,'selectionBox');"

kalyson
06-14-2007, 08:12 AM
Thanks for the quick reply! That fix does work in IE, but not Firefox. I'm not sure why, of course. I really appreciate the input, though -- it certainly is a start.

rwedge
06-14-2007, 08:20 AM
Add return to all events:
onmousedown="return setStartDraw(event,'selectionBox');"
onmousemove="return drawBox(event,'selectionBox');"
onmouseup="return stopDraw(event);"

kalyson
06-14-2007, 08:28 AM
Wow. You are great! That worked!

Thanks!!!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum