Image Zoom

gibney.org : Technology : Javascript : Experiments : Image Zoom

(Entry Nr. 240, by user 1 | edit)

// --------------------------------------------------------------------------------------
// ge_getElementX and ge_getElementY 
// should be moved to the repository
// similar to the functions in 2d.js, but require an object
// instead of an id
// --------------------------------------------------------------------------------------

function ge_getElementX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x) curleft += obj.x;

return curleft;
}

function ge_getElementY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y) curtop += obj.y;

return curtop;
}

// --------------------------------------------------------------------------------------
// ge_ImageWindow()
// --------------------------------------------------------------------------------------

function ge_ImageWindow()
{
 InnerObject=new Object();
 OuterObject=new Object();

MouseX=0;
 MouseY=0;

p=document.getElementById("thepic");
 InnerObject.width=parseInt(p.width);
 InnerObject.height=parseInt(p.height);

d=document.getElementById("thediv");
 OuterObject.width=parseInt(d.style.width);
 OuterObject.height=parseInt(d.style.height);
 OuterObject.x=ge_getElementX(d);
 OuterObject.y=ge_getElementY(d);

//p.width=OuterObject.width;

p.style.height="100%";

// DisplaySize is in Percent
 InnerObject.DisplaySize=100;

this.Timer=false;
 this.MouseInside=false;

function onmousemove(e)
 {
  var isDOM=document.getElementById&&!document.all;
  // first of all, lets find out where the mouse is
  MouseX = isDOM ? (e.clientX) : (event.clientX);
  MouseY = isDOM ? (e.clientY) : (event.clientY);
 }

function onmousedown(e)
 {
   p=document.getElementById("thepic");
   p.style.width=TheSize;
 }

function TimeStep()
 {
  if (!this.MouseInside) return;

p=document.getElementById("thepic");

if (InnerObject.DisplaySize<1000) InnerObject.DisplaySize++;

// what does x and y mean in percent of the outer object...
  xp=(MouseX-OuterObject.x)/OuterObject.width;
  yp=(MouseY-OuterObject.y)/OuterObject.height;
 
  MaxMoveX=(InnerObject.DisplaySize-100)/100*OuterObject.width;
  MaxMoveY=(InnerObject.DisplaySize-100)/100*OuterObject.height;

x=0-xp*MaxMoveX;
  y=0-yp*MaxMoveY;

// todo: center the inner object

p.style.left=parseInt(x)+"px";
  p.style.top=parseInt(y)+"px";
  p.style.height=InnerObject.DisplaySize+"%";

this.Timer=window.setTimeout(function(){TimeStep();},40);
 }

function onmouseover(e)
 {
  if (!this.Timer) Timer=window.setTimeout(function(){TimeStep();},40);
  MouseInside=true;
 }

function onmouseout(e)
 {

var isDOM=document.getElementById&&!document.all;
  // first of all, lets find out where the mouse is
  MouseX = isDOM ? (e.clientX) : (event.clientX);
  MouseY = isDOM ? (e.clientY) : (event.clientY);

// what does x and y mean in percent of the outer object...
  xp=(MouseX-OuterObject.x)/OuterObject.width;
  yp=(MouseY-OuterObject.y)/OuterObject.height;

if (xp<0.99 && yp<0.99 && xp>0.01 && yp>0.01) return;
  
   p=document.getElementById("thepic");
   p.style.left=0;
   p.style.top=0;
   p.style.height="100%";
   InnerObject.DisplaySize=100;
   MouseInside=false;
   window.clearTimeout(this.Timer);
 }

d=document.getElementById("thediv");
 d.onmousemove = onmousemove;
 d.onmousedown = onmousedown;
 d.onmouseover = onmouseover;
 d.onmouseout  = onmouseout;
}

var ImageScaler=new ge_ImageWindow();

</script>

Create a new entry at this position