How to move image with mouse inside iframe

[Mike02]

I have an iframe on my page -

<iframe width="425" height="460" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" src="Gmap.htm"></iframe>

The html page Gmap.htm contains a map 663x855 px, name GM003.jpg. The visible part of the map can be moved around inside the iframe by the scrollbars or arrow keys.

I would like to drag it with a mouse in a similar way to Google Maps. I've tried adapting the code on
http://forums.asp.net/t/1267650.aspx/1
without success. Please could someone suggest correct code or point me in the right direction.

Thank you.

[rtrethewey]

Using an <iframe> will only make the job more complicated. Replace your <iframe> with a <div> that contains the image, and use JavaScript to track the mouse actions. Something like:

<style type="text/css">
#mapDiv { position:relative: top:0; left:0; margin:0; padding:0; width:425px; height:460px; overflow:hidden; }
#mapDiv img { position:absolute; top:-197px; left:-120px; width:663px; height:855px; margin:0; padding:0; }
</style>
.
.
<div id="mapDiv"><img src="GM003.jpg"></div>
.
.

Search for "JavaScript click and drag image" and you should find some JavaScript you can adapt for this.

[Mike02]

All sorted - thank you!