So if you want to control the position of an object, your JavaScript would go something like this:
<script language="javascript">
function moveIt() {
if(document.layers) {
document.truck.left -= 5;
if (document.truck.left <0) {
document.truck.left = 480;
}
} else if (document.all) {
truck.style.left = parseInt(truck.style.left) - 5;
if (parseInt(truck.style.left) < 0) {
truck.style.left = 480;
}
}
if ((document.layers) || (document.all)) {
setTimeout('moveIt()', 100);
}
}
</script>
Which would look something like this:
[On this page you are seeing GIFs instead of actual dynamic HTML because you're using a pre-4.0 browser.]
The code above could be translated as:
- If the client supports the document.layers object,
- subtract five from the left value of the layer object named truck.
- If the layer object named truck is less than zero,
- then the left property of the layer object named truck should be set to 480.
- However, if the client supports the document.all object,
- take the integer value minus five from the style selector left
from the HTML object named truck.
- If the integer value of the style selector left of the HTML object named
truck is less than zero,
- If the client supports either of the objects document.all or document.layers,
- wait a 10th of a second and execute the function named moveIt.
OK, now you do it. Drive the truck all up and down a page. And then let's move
on to the next section. A little note here: You'll want to put your style information
inline, i.e., <DIV id="truck" style="position: absolute; left:
20; top: 20">. I know that this kind of breaks up any conceptually friendly
separation of content and presentation, but I'll show you how to do this when we
get to the advanced animation section.
next page»