Zooming In on a Selection (JavaScript)

Take the following steps to add code that lets you select an area with a mouse, and zoom in on the selected area:

1.

Start with the project that you created in Loading and Displaying an Image.

2.

Insert the following code between the <HEAD> </HEAD> tags to handle the MouseDown and RubberBand events respectively:

<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="MouseDown(Button, Shift , X , Y)">
<!--
   //Enable AutoRubberBand
      LEADRasterView1.AutoRubberBand = true; 
   LEADRasterView1.MousePointer = 2; 
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript" FOR="LEADRasterView1" EVENT="RubberBand">
<!--
   var zoomleft; 
   var zoomtop; 
   var zoomwidth; 
   var zoomheight; 

   LEADRasterView1.MousePointer = 0; 

   //Zoom in on the selection. 
   zoomleft = LEADRasterView1.RubberBandLeft; 
   zoomtop = LEADRasterView1.RubberBandTop; 
   zoomwidth = LEADRasterView1.RubberBandWidth; 
   zoomheight = LEADRasterView1.RubberBandHeight; 

   //Zoom in on the rectangle defined by the rubberband
   LEADRasterView1.ZoomToRect (zoomleft, zoomtop, zoomwidth, zoomheight); 
   LEADRasterView1.ForceRepaint ();
//-->
</SCRIPT>

3.

Run the page to test it.