DIR : /home/kozerus/public_html/zm/11-SetView.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", "ZoomifyImageExample2"); </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="harbor" id="harbor" value="Harbor" onMouseDown="Z.Viewport.setView(null, null, 50)" onTouchStart="Z.Viewport.setView(null, null, 50)" />
<input type="button" name="theater" id="theater" value="Theater" onMouseDown="Z.Viewport.setView(1950, 1100, 100)" onTouchStart="Z.Viewport.setView(1950, 1100, 100)" />
<input type="button" name="fullView" id="fullView" value="Full View" onMouseDown="Z.Viewport.setView()" onTouchStart="Z.Viewport.setView()"/>
</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