ho imporvvisato questo

funziona solo su FF. E' quindi solo uno spunto. Pero' il concetto e' quello

L'immagine la imposti nei css. Ho settato un quadrato 100x100 scrollabile. Metti i valori che vuoi

codice:
<html>
  <head>
    <style type="text/css">
    div.container {
       background: url("immagine.jpg") no-repeat ;
       background-position: 0px 0px;
       width: 100px;
       height: 100px;
    }
    </style>
    
    <script>
    var mouseisdown = false
    var x, y;
    var posX = 0, posY = 0;
    function pressed(p, evt)
    {
      mouseisdown = p;
      
      x = evt.clientX - posX;
      y = evt.clientY - posY;
    }
    
    function scroll(el, evt)
    {
      if(mouseisdown)
      {
        posX = evt.clientX - x;
        posY = evt.clientY - y;
        el.style.backgroundPosition= posX+"px" + " " + posY+"px";
      }
    }
    
    </script>
  </head>
  <body>
    <div id="cont" class="container" onmousemove="scroll(this, event)" onmousedown="pressed(true, event)" onmouseout="pressed(false, event)" onmouseup="pressed(false, event)"></div>
  </body>
</html>