DIR : /home/kozerus/public_html/zm/10-ToolbarInPage.htm
/home/kozerus/public_html/zm
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ZoomifyImageViewer.js"></script>
<style type="text/css"> #myContainer { width: 900px; height: 500px } </style>
<script type="text/javascript"> Z.showImage("myContainer", "ZoomifyImageExample", "zToolbarVisible=0"); </script>
</head>
<body>
<div align="center">
<table cellpadding="10">
<tr>
<td>
<table width="100" border="0" align="center" cellpadding="1" cellspacing="0" bgcolor="#000000" >
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td>
<div id="myContainer"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div align="center">
<form name="myForm" id="myForm">
<input type="button" name="zoomOut" id="zoomOut" value="Zoom Out" onMouseDown="Z.Viewport.zoom('out')" onMouseUp="Z.Viewport.zoom('stop')" onTouchStart="Z.Viewport.zoom('out')" onTouchEnd="Z.Viewport.zoom('stop')"/>
<input type="button" name="zoomIn" id="zoomIn" value="Zoom In" onMouseDown="Z.Viewport.zoom('in')" onMouseUp="Z.Viewport.zoom('stop')" onTouchStart="Z.Viewport.zoom('in')" onTouchEnd="Z.Viewport.zoom('stop')"/>
<input type="button" name="panLeft" id="panLeft" value="Pan Left" onMouseDown="Z.Viewport.pan('left')" onMouseUp="Z.Viewport.pan('stop')" onTouchStart="Z.Viewport.pan('left')" onTouchEnd="Z.Viewport.pan('stop')"/>
<input type="button" name="panUp" id="panUp" value="Pan Up" onMouseDown="Z.Viewport.pan('up')" onMouseUp="Z.Viewport.pan('stop')" onTouchStart="Z.Viewport.pan('up')" onTouchEnd="Z.Viewport.pan('stop')"/>
<input type="button" name="panDown" id="panDown" value="Pan Down" onMouseDown="Z.Viewport.pan('down')" onMouseUp="Z.Viewport.pan('stop')" onTouchStart="Z.Viewport.pan('down')" onTouchEnd="Z.Viewport.pan('stop')"/>
<input type="button" name="panRight" id="panRight" value="Pan Right" onMouseDown="Z.Viewport.pan('right')" onMouseUp="Z.Viewport.pan('stop')" onTouchStart="Z.Viewport.pan('right')" onTouchEnd="Z.Viewport.pan('stop')"/>
<input type="button" name="reset" id="reset" value="Reset" onClick="Z.Viewport.reset()"/>
<input type="button" name="fullPage" id="fullPage" value="Full Page" onClick="Z.Viewport.toggleFullPageViewExternal()"/>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer