Log in

View Full Version : 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 :



<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
<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 ?


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
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 !