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

Thu Mar 4 11:46:58 PST 2004

Hello,

Your code is internet-explorer-specific, and could not work with other 
browsers.
On the UMN mapserver site, you can find several dhtml (with javascripts) 
zoomin/zoomout API.
See http://mapserver.gis.umn.edu/contributed.html for more informations.

D FAIVRE

Rene Teniere a écrit :

>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>
>
>_______________________________________________
>Mapserver-users mailing list
>Mapserver-users at lists.gis.umn.edu
>http://lists.gis.umn.edu/mailman/listinfo/mapserver-users
>  
>