http://maps.google.com/

I have a really large image and I need to be able to drag & scroll it with my mouse just like google maps.

This is what I came up with:

<script language="JavaScript1.2">

var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x = 0;
var y = 0;

function movemouse(e){
	
if(isdrag){

document.getElementById('lista').scrollLeft -=  (nn6 ? e.clientX - x : event.clientX - x);
document.getElementById('lista').scrollTop -= (nn6 ? e.clientY - y : event.clientY - y);

return false;
}
}

function selectmouse(e) {
	x = nn6 ? e.clientX : event.clientX;
	y = nn6 ? e.clientY : event.clientY;
	isdrag = true;
	document.onmousemove=movemouse;
	return false;
}
function mouseup(e){
	isdrag = false;
}

document.onmousedown=selectmouse;
document.onmouseup=mouseup;

</script>

====================== HTML ==================


<div style="overflow:hidden; width: 500px; height: 400px;">
<img src="VERY LARGE IMAGE" />
</div>

^ this partially works, but the more you scroll to left or right, the faster it moves. Look at the live demo:

http://www.scape-xp.com/world_map.php



does anyone have an idea why it's behaving like this?

Not sure at first glance, but it could have something to do with the fact that you are attaching the onmousemove event every time there is an onmousedown event. This is going to create memory leaks, regardless, so it would be better to only attach this event once, then determine if action should be taken via your "isdrag" variable.

I suspect something in your math is funny.

EDIT:

you were right. My math is wrong.
After each mouse move, I had to update x and y variables again so that they could be compared on the next mousemove(e) event instead of using the same x and y from the very first click.

here is what I added:

function movemouse(e){
	
if(isdrag){

document.getElementById('lista').scrollLeft -=  (nn6 ? e.clientX - x : event.clientX - x);
x = nn6 ? e.clientX: event.clientX;
document.getElementById('lista').scrollTop -= (nn6 ? e.clientY - y : event.clientY - y);
y = nn6 ? e.clientY : event.clientY;

return false;
}
}

works perfectly. Problem solved

Good work

Hello ,
Nice effect , but when i try this is in Mozila FireFox the code is not working properly, when we click mouse to drag image , image get stick to mouse and till next click it get attached to mouse and move according to mouse direction, is there any solution for this ...please reply .... thank you.

Sir, Really nice job.......

add this piece of code inside selectmouse(e) function:

if(e.preventDefault) { 
e.preventDefault();
 }

EDIT:

it looks like IE 8 has the same problem.
add this too:

document.ondragstart = function(){
	return false;
}