Need a few pointers please

I want to have a div center page 400x300px with an image inside the div, the image will be larger than the div ie so the div only shows a portion of the image. The image could even be applied as a background image to the div. So far so good.

Now I need a javascript so that when I mouseover the div the image drags (effectively the div scrolls) to show a different part of the image, so moving the mouse to the right will drag the picture to the left etc.

Ive had success on a full screen layout with using scrollTo but cant seem to get this to work for div contents.

The final objective is to have it so the javascript returns the exact coordonates of the place on the map clicked, which can then be used to take them to another more detailed picture.

Any advice appreciated ?

My sinmple code for the fullscreen that works well

<body onmousemove='window.scrollTo(x=event.x*4-500,y=event.y*4-200)'>
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style='width:300%;'>