[RESOLVED] automatically pan image via javascript?

sneakyimp

I have an image pane in a page that is supposed to be about 600w by 450h. I would like, if the image is larger than that, to automatically pan it back and forth slowly. I know how to do this in Flash, but have no idea how it might be done in javascript.

I don't want there to be any scroll bars at all. I'm also guessing that I will need to wait for the image to load so that its dimensions can be detected by Javascript. And lastly, it must work on all browsers (if possible).

Can anyone give me an idea about how this might be done? Ideally an existing example would be available some where. I've been googling (+javascript pan image) but the first four pages of results haven't yielded anything useful yet. I'm thinking it might be easiest to make the image the background image of a DIV tag and gradully change its offset with a setInterval type thing.

The part that is most confusing to me is detecting when an image has fully loaded in Javascript.

Any tips would be most appreciated.

rulian

Just for giggles I gave it a shot
I basically load the image off the page to get its size
and then use it to display the image in a target area

<html>
<head>
<script type="text/javascript" language="javascript">
var Pan = new Object(); 
Pan.MAXW=600; 
Pan.TARGET = "one"; 
Pan.DISTANCE=10; 
Pan.TIME = 5; 
function img_pan(url)
	{
		var D = new Image(); 
		var Doc = document.body; 
		D.onload=function()
			{
				var Size = new Array(this.offsetWidth, this.offsetHeight); 
				var E = new Image(); 
				E.src = url; 
				var F = document.getElementById(Pan.TARGET); 
				if (Size[0] > Pan.MAXW)
					{
					F.style.width = Pan.MAXW + "px"; 
					F.style.height= Size[1] + "px";
					F.style.overflow = "hidden"; 
					E.style.position="relative"; 
					E.style.left="0px"; 
					var Direction = Pan.DISTANCE * -1; 
					setInterval(function()
						{
						var X = parseInt(E.style.left);	
						if (X < (Pan.MAXW - Size[0]) || X > 0) Direction = Direction * -1;						
						E.style.left = (X + Direction) + "px";

					}, Pan.TIME * 10); 
				}
			F.innerHTML = ""; 
			F.appendChild(E); 
		}
	D.src=url;
	D.style.position="absolute"; 
	D.style.left="-1500px"; 
	D.style.top="-1500px"; 
	Doc.appendChild(D); 
}
</script>
</head>
<body onload="img_pan('index_main.jpg');">
<div id="one">one</div>
</body>
</html>

sneakyimp

Thanks for the code, Rulian. I managed since my post to get this working and it seems to do nicely in Firefox 3, IE 7, and Safari 3 on windows.

It consists of an external js file:

// JavaScript Document
/**
 * This function attaches pan functionality to the supplied image argument
 * @param HTMLElement elImg The image to be panned
 * @param int pW The parent element's width
 * @param int pH The parent element's height
 * @param int to The timeout length in milliseconds
 */
function jtaCreateImagePan(elImg, intvl) {
	if (typeof(elImg)=='string') elImg=document.getElementById(elImg);
	if (elImg&&!elImg.jtaPan) {
		var pObj=elImg.parentNode;
		var imgW=getSt(elImg,'width');
		var imgH=getSt(elImg,'height');
		var pW=getSt(pObj, 'width');
		var pH=getSt(pObj, 'height');
		var mxX=(imgW<=pW) ? 0 : imgW-pW;
		var mxY=(imgH<=pH) ? 0 : imgH-pH;
		elImg.jtaPan=new jtaImagePan(elImg,mxX,mxY,intvl,pObj);
	}
}

function jtaImagePan(elImg,mxX,mxY,intvl,pObj) {
	this.img=elImg;
	this.pObj=pObj;
	this.mxX=mxX;
	this.mxY=mxY;
	this.hDir=this.mxX?'left':null;
	this.vDir=this.mxY?'up':null;
	this.intvl=intvl;
	this.to=null;
	this.imgW=getSt(elImg,'width');
	this.imgH=getSt(elImg,'height');
	this.pW=getSt(this.pObj, 'width');
	this.pH=getSt(this.pObj, 'height');
//	if (bCent){
//		elImg.style.left=(mxX-this.pW)/2+'px';
//		elImg.style.top=(mxY-this.pH)/2+'px';
//	}
	this.pan=this.imgW>getSt(pObj,'width')||this.imgH>getSt(pObj,'height')?this.cycle:this.nocycle;
}

jtaImagePan.prototype.cycle=function(){
	var lft=getSt(this.img,'left');
	var top=getSt(this.img,'top');

// move horizontally
if (this.hDir=='left') {
	lft--;
	if (lft<-this.mxX) {
		this.hDir='right'; // reverse it
	} else {
		this.img.style.left=lft+'px';
	}
}
if (this.hDir=='right') {
	lft++;
	if (lft>0) {
		this.hDir='left'; // reverse it
	} else {
		this.img.style.left=lft+'px';
	}
}
// move vertically as needed
if (this.vDir=='up') {
	top--;
	if (top<-this.mxY) {
		this.vDir='down'; // reverse it
	} else {
		this.img.style.top=top+'px';
	}
}
if (this.vDir=='down') {
	top++;
	if (top>0) {
		this.vDir='up'; // reverse it
	} else {
		this.img.style.top=top+'px';
	}
}

this.to=setTimeout(function(panObj){return function(){panObj.cycle();}}(this),this.intvl);
}

jtaImagePan.prototype.nocycle=function(){}

jtaImagePan.prototype.clear = function() {
	if (this.to) {
		clearTimeout(this.to);
	}
}

function getSt(el,styl) {
 if (el.currentStyle) return parseInt(el.currentStyle[styl.replace(/-/g,'')]);
 return parseInt(document.defaultView.getComputedStyle(el,null).getPropertyValue(styl.toLowerCase()));
}

You can use it on an image this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Auto Scrolling Picture Example</title>
<script type="text/javascript" src="js/jtaImagePan.js"></script>
</head>
<body>
<div id="pageImageDiv">
<img id="pageImage" src="/munoz/images/uploads/27.jpg" style="position:relative;left:0px;top:0px;width:600px;height:800px;"
onload="jtaCreateImagePan(this,100);this.jtaPan.pan();"
onmouseover="this.jtaPan.clear();"
onmouseout="this.jtaPan.pan();"
/>
</div>
</body>
</html>