Menu
hello,
i want to draw a rectangle dynamically based on the mouse movements.When the user clicks and drags the mouse the rectangle als o has to expand and on releasing the mouse (onmouseup) the rectangle has to disappear.
I could successfully do that on an empty document.But when i wnat to do the same on an image, i am facing problems.When i hold the mouse down on the image and move the mouse the small rectangle comes up and does not expand.But when i release the mouse the rectangle expands to the clicked point and from then on,even if i do not hold the mouse down the rectangle expands(contracts) based on the mouse movements.on clicking again the rectangle disappears.
Can any body tell me whats wrong with the code. here is the code i have writen:
HTML>
<HEAD>
<title>WebForm1</title>
<meta content=”Microsoft Visual Studio .NET 7.1″ name=”GENERATOR”>
<meta content=”Visual Basic .NET 7.1″ name=”CODE_LANGUAGE”>
<meta content=”JavaScript” name=”vs_defaultClientScript”>
<meta content=”
<script>
var x1;
var x2;
var y1;
var y2;
var rect = document.createElement(“div”);
function dozoom()
{
x1 = x2 = y1 = y2 =0;
document.onmousedown = ponmousedown;
document.onmouseup = ponmouseup;
}
function rectangle(w,h,k,l,bg,bCol)
{
//var rect = document.createElement(“div”);
//if (w == 0 && h == 0 && k == 0 && l == 0)
//{ return false;}
var style = rect.style;
style.width = w ;
style.height = h ;
style.left = k ;
style.top = l ;
style.backgroundColor = bg;
style.borderColor = bCol;
style.position = “absolute”;
style.borderStyle = “solid”;
style.borderWidth = 2;
style.zIndex = 101;
return rect;
}
function ponmousedown(e)
{
//alert(“in mouse down”);
x1 = x2 = y1 = y2 =0;
document.body.appendChild(rectangle(0,0,0,0,”transparent”,”white”) );
x1=event.clientX;// + document.body.scrollLeft;
y1=event.clientY;// + document.body.scrollTop;
rect.style.visibility = “visible”;
document.onmousemove = ponmousemove;
}
function ponmouseup(e)
{
alert(“in mouse up”);
x2=event.clientX;// + document.body.scrollLeft;
y2=event.clientY;// + document.body.scrollTop;
rect.style.visibility = “hidden”;
//document.Form1.submit();
}
function ponmousemove(e)
{
var x,y,w,l;
//alert(“in mouse move”);
x2=event.clientX ;//+ document.body.scrollLeft;
y2=event.clientY ;//+ document.body.scrollTop;
if (x1<x2)
{x = x1;}
else
{x = x2;}
if (y1<y2)
{y = y1;}
else
{y = y2;}
w = Math.abs(x2-x1);
l = Math.abs(y2-y1);
document.body.appendChild(rectangle(w,l,x,y,”transparent”,”blue”) );
//document.form1.point.value = x1 & ” ” & y1 ;
}
</script>
</HEAD>
<body MS_POSITIONING=”GridLayout”>
<form id=”Form1″ method=”post” runat=”server”>
<asp:Image id=”Image1″ style=”Z-INDEX: 101; LEFT: 256px; POSITION: absolute; TOP: 88px” runat=”server”
Width=”536px” Height=”328px”></asp:Image>
<INPUT style=”Z-INDEX: 102; LEFT: 440px; WIDTH: 128px; POSITION: absolute; TOP: 464px; HEIGHT: 40px”
type=”button” value=”ZoomIn” onclick = “dozoom()”></form>
</body>
</HTML>
Thanks in advance
Sasidhar