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="panner" onmousedown="startDrag(event)">
<img class="panned" src="oversized-image.jpg" ondragstart="return false" onmousedown="return false" />
And now your CSS:
width: 300px; height: 300px;
clip: rect(0 300px 300px 0);
width: 1000px; height: 1000px;
I hope you find it useful.