[Mapserver-users] Rubber Band Box for ZoomIn/ZoomOut Using JS

Thu Mar 4 10:36:30 PST 2004

Hi all,

I am trying to get the cursor to work properly when you click and hold.
Copy the following code into an html file and you'll see what I mean.
I'm not that great in Javascript yet, and this is to be used in an
existing map made from scratch using PHP/MapScript. Implementation is
for a zoomin/zoomout button. Everything else is set, drawing the box on
the screen is the only problem.

Resources for this kind of rubber band box are very sparse on the web,
so I was hoping that someone would have run into this before.

Any help would be appreciated.

Rene

<HTML>
<HEAD>
<TITLE>Image Test for Rubber Box</TITLE>
<STYLE>
#rubberBand
{
  position: absolute;
  visibility: hidden;
  width: 0px; height: 0px;
  border: 2px solid red;
}
</STYLE>

<SCRIPT LANGUAGE="Javascript" TYPE="text/javascript">

function init()
{
	pic.ondragstart=function() {return false};
	pic.ondrag=function() {return false};
}

function mouseDown()
{
  startRubber();
  //return false
}

function mouseUp()
{
  stopRubber();
  //return false
}

function startRubber (evt)
{
  var r = document.all.rubberBand;
  r.style.width = 0;
  r.style.height = 0;
  startx = event.x;
  starty = event.y;
  r.style.pixelLeft = startx;
  r.style.pixelTop  = starty;
  r.style.visibility = 'visible';
  document.onmousemove = moveRubber;
}

function moveRubber (evt)
{
  var r = document.all.rubberBand;

  if((event.x < startx) && (event.y < starty))
  {
    r.style.pixelRight = startx;
    r.style.pixelBottom  = starty;
    r.style.width = r.style.pixelRight - event.x;
    r.style.height = r.style.pixelBottom - event.y;
  }
  else if((event.x < startx) && (event.y > starty))
  {
    r.style.pixelRight = startx;
    r.style.pixelBottom  = starty;
    r.style.width = r.style.pixelRight - event.x;
    r.style.height = event.y - r.style.pixelBottom;
  }
  else if((event.x > startx) && (event.y < starty))
  {
    r.style.pixelLeft = startx;
    r.style.pixelBottom  = starty;
    r.style.width = event.x - r.style.pixelLeft;
    r.style.height = r.style.pixelBottom - event.y;
  }
  else
  {
    r.style.pixelLeft = startx;
    r.style.pixelTop  = starty;
    r.style.width = event.x - r.style.pixelLeft;
    r.style.height = event.y - r.style.pixelTop;
  }
}

function stopRubber (evt)
{
  document.onmousemove = null;
}

</SCRIPT>
</HEAD>
<BODY onload="init()">
<DIV ID="rubberBand"></DIV>
  <table border=1 cellspacing=0 cellpadding=0>
    <tr>
      <TD>
        <IMG name="pic" width=600 height=415
SRC="http://www.gov.ns.ca/natr/juan/images/viewer.jpg" ismap
onmouseup="mouseUp()" onmousedown="mouseDown()">
      </td>
    </tr>
  </table>
</BODY>
</HTML>