Announcement

**vwphillips** · Aug 28, 2011, 12:20 PM

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>

<style type="text/css">
/*<![CDATA[*/

.tstparent {
  position:relative;overflow:hidden;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
}

#tst {
  position:relative;left:0px;top:0px;width:400px;height:300px;
}

.window {
  width:100px;height:75px;border:solid red 1px;
}


/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


function zxcZoomImage(o){
 var img=document.getElementById(o.ID),obj=img.parentNode,window=document.createElement('DIV'),zimg=document.createElement('IMG'),src=o.ZoomSRC,zoom=o.Zoom,zoom=typeof(zoom)=='number'?zoom:2,os=o.ZoomWindowOffset;
 window.style.position='absolute';
 window.style.overflow='hidden';
 window.style.visibility='hidden';
 window.style.zIndex='2';
 window.className=o.WindowClassName;
 zimg.style.position='absolute';
 zimg.style.width=img.width*zoom+'px';
 zimg.style.height=img.height*zoom+'px';
 zimg.src=typeof(src)=='string'?src:img.src;
 window.appendChild(zimg);
 obj.appendChild(window);
 this.window=window;
 this.zimg=zimg;
 this.wh=[obj.offsetWidth,obj.offsetHeight];
 this.zoom=zoom;
 this.os=typeof(os)=='object'&&os.constructor==Array&&typeof(os[0])=='number'&&typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
 this.wos=[-window.offsetWidth/2,-window.offsetHeight/2];
 this.addevt(document,'mousemove','imgzoom',obj);
}

zxcZoomImage.prototype={

 imgzoom:function(e,obj){
  var mse=this.mse(e),pos=this.pos(obj),x=mse[0]-pos[0],y=mse[1]-pos[1],wh=this.wh,os=this.os,wos=this.wos,window=this.window,zimg=this.zimg,zoom=this.zoom;
  if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
   x+=os[0];
   y+=os[1];
   window.style.left=x+'px';
   window.style.top=y+'px';
   zimg.style.left=-x*zoom+wos[0]+'px';
   zimg.style.top=-y*zoom+wos[0]+'px';
   window.style.visibility='visible';
  }
  else {
   window.style.visibility='hidden';
  }
 },

 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];
 },

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

 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); });
 }

}

/*]]>*/
</script>


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

function Init(){

new zxcZoomImage({
 ID:'tst',                                                         // the unique ID name of the image to zoom.                           (string)
 WindowClassName:'window',                                         // the class name of the zoom window DIV element.                     (string)
 Zoom:2,                                                           //(optional) the zoom factor.                                         (number, default = 2)
 ZoomSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', //(optional) the file path and name of the zoom image.                (string, defaule = the src of the image to zoom)
 ZoomWindowOffset:[0,-75]                                          //(optional) the zoom window x and y offsets from the mouse position. (array, default = centered on the mouse position)
});
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>

 <div class="tstparent" >
  <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
 </div>


</body>

</html>

**ground0** · Aug 28, 2011, 12:47 PM

This is amazing! Honestly I wasn't expecting that much help. Thanks a lot for your time vwphillips.

Announcement

map zooming

map zooming

Comment

Comment