Uncle Jim's Javascript Examples: DHTML Image Zoom

COPY - Insert Between Head Tags: <HEAD></HEAD>

COPY - Insert Inside Body: <BODY></BODY>

<table width="100%" border="0" cellspacing="2" cellpadding="2"><tr>
<td width="30%" valign="top">
<table border=0>
<tr>
  <td valign=center align=center><a href="javascript:tszoom.pan('leftup',1);"><SPAN style="cursor:nw-resize; color:darkred">*</a></SPAN</td>
  <td valign=center align=center><a href="javascript:tszoom.pan('up',1);"><SPAN style="cursor:n-resize; color:darkred">↑</a></SPAN></td>
  <td valign=center align=center><a href="javascript:tszoom.pan('rightup',1);"><SPAN style="cursor:ne-resize; color:darkred">*</a></SPAN></td>
</tr><tr>
  <td valign=center align=center><a href="javascript:tszoom.pan('left',1);"><SPAN style="cursor:e-resize; color:darkred">←</a></SPAN></td>
  <td valign=center align=center><font size="2" color="#000066"><b>PAN</b></font></td>
  <td valign=center align=center><a href="javascript:tszoom.pan('right',1);"><SPAN style="cursor:w-resize; color:darkred">→</a></SPAN></td>
</tr><tr>
  <td valign=center align=center><a href="javascript:tszoom.pan('leftdown',1);"><SPAN style="cursor:sw-resize; color:darkred">*</a></SPAN></td>
  <td valign=center align=center><a href="javascript:tszoom.pan('down',1);"><SPAN style="cursor:s-resize; color:darkred">↓</a></SPAN></td>
  <td valign=center align=center><a href="javascript:tszoom.pan('rightdown',1);"><SPAN style="cursor:se-resize; color:darkred">*</a></SPAN></td>
</tr></table>
<script language='JavaScript'></script>
<br><br>
<a href="javascript:tszoom.setRGN('.6,.6,.2,.2');">Go to Spot 1</a> | <a href="javascript:tszoom.setRGN('.1,.1,.7,.7');">Go to Spot 2</a><br>
<a href="javascript:tszoom.zoomIn();">Zoom In</a> | <a href="javascript:tszoom.zoomOut();">Zoom Out</a> | <a href="javascript:tszoom.reset();">Reset</a>

Copy the below script files:
dynapi.js · tsapi.js

Image Panning and Zooming