Using scrollTo wihin a div

Hi

Need a few pointers please

I want to have a div center page 400x300px with an image inside the div, the image will be larger than the div ie so the div only shows a portion of the image. The image could even be applied as a background image to the div. So far so good.

Now I need a javascript so that when I mouseover the div the image drags (effectively the div scrolls) to show a different part of the image, so moving the mouse to the right will drag the picture to the left etc.

Ive had success on a full screen layout with using scrollTo but cant seem to get this to work for div contents.

The final objective is to have it so the javascript returns the exact coordonates of the place on the map clicked, which can then be used to take them to another more detailed picture.

Any advice appreciated ?

My sinmple code for the fullscreen that works well


<body onmousemove='window.scrollTo(x=event.x*4-500,y=event.y*4-200)'>
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style='width:300%;'>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="p1" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcPan={

 init:function(id){
  var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
  p.style.overflow='hidden';
  img.style.position='absolute';
  obj={
   p:p,
   img:img
  }
  this.addevt(p,'mousemove','pan',obj);
 },

 pan:function(e,obj){
  var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1];
  obj.img.style.left=-x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth))+'px';
  obj.img.style.top=-y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight))+'px';
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}

zxcPan.init('p1');
/*]]>*/
</script>
</body>

</html>

Wow… thanks Vic, that works great.

Ive modified to show the position of the mouse on the image, but Im having trouble adding an OOP onClick event that works with your script so I can AJAX the coordinates of the click back to the server. Im only a basic javascripter, php is my bag :smiley:

Heres what Ive got so far, but your eventlistener coding (where Im guessing I need to put the onClick listener?) is well beyond my capability.

Thanks again


<script type="text/javascript">
/*<![CDATA[*/
var zxcPan={
 init:function(id){
  var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
  p.style.overflow='hidden';
  img.style.position='absolute';
  obj={
   p:p,
   img:img
  }
  this.addevt(p,'mousemove','pan',obj);
 },
 pan:function(e,obj){
  var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1],scrollx,scrolly;
  scrollx = x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth));
  scrolly = y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight));
  obj.img.style.left=-scrollx+'px';
  obj.img.style.top=-scrolly+'px';
  document.getElementById('xytext').innerHTML = Math.round(scrollx+x) +' , '+ Math.round(scrolly+y);
 },
 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },
 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },
 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }
}
zxcPan.init('p1');
/*]]>*/
</script>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<div id="p1" style="position:relative;width:400px;height:300px;border:solid red 1px;" >
<img src='http://www.ezilon.com/maps/images/world-physical-map.gif' style="width:300%;">
</div>

<script type="text/javascript">
/*<![CDATA[*/

var zxcPan={

 init:function(id){
  var p=document.getElementById(id),img=p.getElementsByTagName('IMG')[0],obj;
  p.style.overflow='hidden';
  img.style.position='absolute';
  obj={
   p:p,
   img:img
  }
  this.addevt(p,'mousemove','pan',obj);
  this.addevt(p,'mouseup','rtrn',obj);
 },

 rtrn:function(e,obj){
  alert('image x = '+obj.img.style.left+'\
image y = '+obj.img.style.top);
  alert('mouse position = '+obj.xy);
 },

 pan:function(e,obj){
  var m=this.mse(e),p=this.pos(obj.p),x=m[0]-p[0],y=m[1]-p[1];
  obj.img.style.left=-x/(obj.p.offsetWidth/(obj.img.width-obj.p.offsetWidth))+'px';
  obj.img.style.top=-y/(obj.p.offsetHeight/(obj.img.height-obj.p.offsetHeight))+'px';
  obj.xy=[x,y];
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
 }

}

zxcPan.init('p1');
/*]]>*/
</script>
</body>

</html>

Thanks again Vic that works great.