There are some libraries —including some proprietary ones— that offer panning functionality. Rolling out your own panning functionality to oversized images on your webpages is actually a fairly simple task and can be achieved by using unobstrusive javascript and CSS without the need of any library. Have I said it's cross-browser compatible?
Basically you'll be wrapping your oversized image in two divs; one with the true dimensions of the image and another one with the available panning area. Use the clip property and set overflow to hidden in the wrapping div to achieve the desired effect.
Your html code will be as simple as this:
<div class="pan-container">
<div class="panner" onmousedown="startDrag(event)">
<img class="panned" src="oversized-image.jpg" ondragstart="return false" onmousedown="return false" />
</div>
</div>
Note that for the purpose of simplification I am inserting some inline javascript. In practice I would bind the events in a separate file.
And now your CSS:
.pan-container{
width: 300px; height: 300px;
clip: rect(0 300px 300px 0);
position: relative;
overflow:hidden;
}
.panner {
position:relative;
width: 1000px; height: 1000px;
}
The trick in the javascript code is to use the top and left properties of the first div (panner) to move the image around. Get a little fancy and cap the top and left properties so the image can't be panned out of its margins. These limits can be calculated from the clientHeight and clientWidth properties of the surroundings div.
A complete implementation of the javascript code can be found at pan.js which is demonstrated at panning demo. If you are curious about the used image, it is the Giralda, the bell tower of the Cathedral on Sevilla in Spain. http://en.wikipedia.org/wiki/Giralda
I hope you find it useful.