The IlvZoomInteractor allows
direct interaction with the image; it allows the user to select an
area on the image to zoom this area. Installing an interactor on the
view is simple: you need only create the interactor and set it to
the view:
var zoomInteractor = new IlvZoomInteractor() view.setInteractor(zoomInteractor)
In the example, you add a button that installs the interactor.
To do this, add the following lines to the page:
<script TYPE="text/javascript"
src="script/IlvInteractor.js"></script>
<script TYPE="text/javascript"
src="script/IlvDragRectangleInteractor.js"></script>
<script TYPE="text/javascript"
src="script/IlvZoomInteractor.js"></script>
<script TYPE="text/javascript"
src="script/IlvInteractorButton.js"></script>
To use the interactor, you have to import three JavaScript™
files:
IlvInteractor.js, IlvDragRectangleInteractor.js,
and IlvZoomInteractor.js. This is because
the IlvZoomInteractor component is a subclass
of the IlvDragRectangleInteractor component.Then you add the following lines to the body of the page:
var zoomInteractor = new IlvZoomInteractor()
zoomInteractor.setLineWidth(1)
zoomInteractor.setColor(’#00ffff’)
...
var zoomrectbutton
zoomrectbutton=new IlvInteractorButton(x+w+50, y+90, 112, 24,
’images/zoomrect.gif’, zoomInteractor, view)
zoomrectbutton.setRolloverImage(’images/zoomrecth.gif’)
zoomrectbutton.setMessage(’click to set zoom mode’)
zoomrectbutton.setToolTipText(’Zoom Mode’)
...
zoomrectbutton.toHTML()
This results in the following page:
You can now click the “Select Zoom Area”
button to install the interactor and then select an area to zoom in.