using scrollTo wihin a div

**Mandes** · Apr 30, 2012 00:58

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

Code:

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

**vwphillips** · Apr 30, 2012 06:54

Code:

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

**Mandes** · Apr 30, 2012 14:51

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

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

Code:

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

**vwphillips** · May 1, 2012 02:17

Code:

<!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+'\nimage 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>

**Mandes** · May 2, 2012 08:51

Thanks again Vic that works great.

User Tag List

Thread: using scrollTo wihin a div

Thread Tools

Display

using scrollTo wihin a div

Bookmarks

Bookmarks

Posting Permissions