jQuery for pan a large image
The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scrip... type="text/javascript" src="/<?php print drupal_get_path('module','minstad')."/mapbox.min.js";?>"></script><script type="text/javascript" src="/<?php print drupal_get_path('module','minstad')."/mousewheel.js";?>"></script><style type="text/css">
#viewport {
width: 1130px;
height: 1000px;
cursor: move;
margin: 20px auto;
overflow: hidden; /*keep map contents from spilling over if JS is disabled*/
}</style>
<div id="viewport">
<div style="background: url(http://www.min-stad.se/sites/default/files/tunnelbana_1130x800.jpg) no-repeat; width: 100%; height: 1000px;">
<!--top level map content goes here--> </div>
<div style="height: 1550px; width: 1097px;">
<img alt="" src="http://www.min-stad.se/sites/default/files/tunnelbana_1550x1097.jpg" />
<div class="mapcontent">
<!--map content goes here--> </div>
</div>
<div style="height: 1938px; width: 1372px;">
<img alt="" src="http://www.min-stad.se/sites/default/files/tunnelbana_1938x1372.jpg" />
<div class="mapcontent">
<!--map content goes here--> </div>
</div>
<div style="height: 2422px; width: 1715px;">
<img alt="" src="http://www.min-stad.se/sites/default/files/tunnelbana_2422x1715.jpg" />
<div class="mapcontent">
<!--map content goes here--> </div>
</div>
<div style="height: 3028px; width: 2144px;">
<img alt="" src="http://www.min-stad.se/sites/default/files/tunnelbana_3028x2144.jpg" />
<div class="mapcontent">
<!--map content goes here--> </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#viewport").mapbox({mousewheel: true, defaultLayer: 0, zoomToCursor: true});
});
</script>
Link: