Results 1 to 5 of 5

Thread: Panning across a large picture by click&drag

  1. #1
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Panning across a large picture by click&drag

    I have a small javascript which allows to pan across a large picture (like a big map, much larger than the current window) in any direction, with a simple click and drag (just like the hand cursor of acrobat reader).
    The problem : it works only in IE and not in FF, and I don't understand why !
    Could anybody help ?
    I've put a large but very light map.jpg in attachment.

    Here's the HTML :
    Code:
    <html><head><title>panning across a large picture</title>
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
    
    <script type="text/javascript">
    document.onmousedown = function(){
      var e=arguments[0]||event;
      var x=document.body.scrollLeft+e.clientX;
      var y=document.body.scrollTop+e.clientY;
      document.onmousemove=function(){
        scrollTo(x-e.clientX, y-e.clientY);
        return false;
      }
      document.onmouseup=function(){
        document.onmousemove=null;
      }
      return false;
    }
    // End -->
    </script>
    
    </head>
    <body style="cursor: hand" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
    <img src="map.jpg" border="0">
    </body>
    </html>

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
    <html><head><title>panning across a large picture</title>
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">
    
    <script type="text/javascript">
    document.onmousedown = function(){
      var e=arguments[0]||event;
      var x=zxcWWHS()[2],y=zxcWWHS()[3],mx=e.clientX,my=e.clientY;
      document.onmousemove=function(){
       var e=arguments[0]||event;
        scrollTo(x+(e.clientX-mx), y+(e.clientY-my));
        return false;
      }
      document.onmouseup=function(){
        document.onmousemove=null;
      }
      return false;
    }
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    // End -->
    </script>
    
    </head>
    <body style="cursor: hand" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
    <img src=http://www.vicsjavascripts.org.uk/StdImages/One.gif" border="0" width=2000 >
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thank you so much !
    I'm new on the forum and didn't even dream of such a quick and smart answer !

    Your script works well indeed on both browsers.

    The only difference is in the direction of draging the mouse : you have to grab the other way to pan the picture.
    I guess it lies in the line ?
    Code:
    scrollTo(x+(e.clientX-mx), y+(e.clientY-my));
    But I'm unable to find the good mixture of variables !! (sorry !)
    thanx again !

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    Code:
        scrollTo(x+(mx-e.clientX), y+(my-e.clientY));
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ooops ! It is so easy, when someone else does it !
    it works perfectly now.
    cheers !

Bookmarks

Posting Permissions

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