Image Panning

[icu222much]

I am wondering how I would have a series of images pan across the browser from right to left? For example, I have several different images of clouds and I would like them to do a simple linear pan from right to left. Every ten seconds, a new cloud would begin panning. How would I do this in JavaScript?

 

[BillyRayPreachersSon]

Investigate using setTimeout or setInterval to call code every nnn milliseconds.

Also investigate the use of setting the left position of an element using "el.style.left = 'nnnpx';"

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[icu222much]

I looked around for some JavaScript that I thought could work and I found two. Both of them don't work exactly how I want them to so I tried tweaking them around a bit.

On the first one, I was able to get my image to pan from right to left. What I then tried doing is to place a cloud on the screen periodically but it didn't seem to work. Instead, now the cloud seems to jump back and forth.

On the second one, I found a script that detected when the image has reached the end of the browser and resets itself. The problem I have with this one is that I couldn't get the cloud to move from right to left.

-------------------------------------------

Code One:

<style type="text/css">
#fooObject2 {
position:absolute;
right:0px;
background-image:url(cloud.gif);
height: 158px;
width: 100px;
margin: 50px 0 0 0;
}
</style>



<script type="text/javascript">

var foo = null; // object
var foo2 = null;

function doMove() {
foo.style.right = parseInt(foo.style.right)+1+'px';
setTimeout(doMove, 20); // call doMove in 20msec
}

function init() {
foo = document.getElementById('fooObject2'); // get the "foo" object
foo.style.right = '0px'; // set its initial position to 0px
doMove(); // start animating
}


function init2() {
setInterval("init()", 1000);
}


window.onload = init2;

</script>


<div id="fooObject2"></div>


-------------------------------------------

Code Two:




<script type="text/javascript">
<!--

function autoMove2(){
divElement = document.getElementById("div3");
currentPosition = divElement.offsetRight;
currentPosition -= 20;
divElement.style.right = currentPosition+"px";
timer = setTimeout("autoMove2()",100);

pageWidth = document.body.clientWidth;
elementWidth = divElement.offsetWidth;

if (currentPosition >= pageWidth) {
//clearTimeout(timer)
divElement.style.right =- elementWidth+"px";
}

}

// -->
</script>


<DIV id="div3"
style="
position: absolute;
left: 10px;
top: 50px;
height: 158px;
width: 100px;
background-image: url(cloud.gif);
</DIV>

<a href="#null" onclick="autoMove2()">Start</a>