Results 1 to 3 of 3

Thread: How to move image with mouse inside iframe

  1. #1
    Join Date
    Feb 2013

    How to move image with mouse inside iframe

    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
    without success. Please could someone suggest correct code or point me in the right direction.

    Thank you.

  2. #2
    Join Date
    Mar 2011
    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; }
    <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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Feb 2013
    All sorted - thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center