Panning across a large picture by click&drag

**Pierre-Yves** · 07-21-2009, 06:50 PM

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>

**vwphillips** · 07-22-2009, 08:57 AM

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>

**Pierre-Yves** · 07-22-2009, 02:00 PM

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 !

**vwphillips** · 07-22-2009, 04:42 PM

Code:

    scrollTo(x+(mx-e.clientX), y+(my-e.clientY));

**Pierre-Yves** · 07-22-2009, 05:54 PM

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

Thread: Panning across a large picture by click&drag

Thread Tools

Search Thread

Panning across a large picture by click&drag

Bookmarks

Bookmarks

Posting Permissions