Rubber Band Effect in GIS

You might have observed a Zoom-in Control if you are familiar with GIS Maps.While you are performing such operation,a box is drawn along with the mouse rectangularly.This effect is called Rubber Band Effect.Now I am here to get this functionality using javascript on an image.
Follow the steps as below:
I am using 'underscore'( _ ) in the tags to avoid blogspot from preventing the tags,as you may know the difficulty.
1.Place an asp image control on the form.
<_asp:image id="imgMap" runat="server" height="24px" width="38px" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)">
<_/asp:imagebutton>

2.Place a div tag
<_div id="rubberBand"><_/div>

3.Now add the javascript functions as below:
function mouseDown(event)
{
startRubber(event);
}

function mouseUp(event)
{
var r = document.getElementById('rubberBand');
r.style.visibility = 'hidden';
stopRubber();
}

function startRubber (event)
{
var x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("imgMap").offsetLeft;
var y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("imgMap").offsetTop;

var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
startx = event.x + document.body.scrollLeft + document.documentElement.scrollLeft;
starty = event.y + document.body.scrollTop + document.documentElement.scrollTop;
r.style.pixelLeft = startx;
r.style.pixelTop = starty;
r.style.visibility = 'visible';
}

document.onmousemove = moveRubber;
}

function moveRubber ()
{
var r = document.getElementById('rubberBand');

latestx=event.x + document.body.scrollLeft + document.documentElement.scrollLeft;
latesty=event.y + document.body.scrollTop + document.documentElement.scrollTop;
if((latestx < pixelright =" startx;" pixelbottom =" starty;" width =" r.style.pixelRight" height =" r.style.pixelBottom"> starty))
{
r.style.pixelRight = startx;
r.style.pixelBottom = starty;
r.style.width = r.style.pixelRight - latestx;
r.style.height = latesty - r.style.pixelBottom;
}
else if((latestx > startx) && (latesty < starty))
{
r.style.pixelLeft = startx;
r.style.pixelBottom = starty;
r.style.width = latestx - r.style.pixelLeft;
r.style.height = r.style.pixelBottom - latesty;
}
else
{
r.style.pixelLeft = startx;
r.style.pixelTop = starty;
r.style.width = latestx - r.style.pixelLeft;
r.style.height = latesty - r.style.pixelTop;
}
}

function stopRubber (event)
{
if (event.offsetX) {
var x=event.offsetX;
var y=event.offsetY;
}
else {
var x=event.pageX-document.getElementById('imgMap').offsetLeft;
var y=event.pageY-document.getElementById('imgMap').offsetTop;
}
document.onmousemove = null;
}

4.Apply a style to rubberband division as below:
#rubberBand
{
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 1px dotted red;
}

Now everthing is ready.Go and get your work done ;)
If any thing has gone wrong,don't get frustated contact me immediately at work hours