Object Mover

This script will move any inline object (text, image, etc.) up, down, left, or right. The only configuration needed is to place your object within the div tags, change 'earth' if you wish, and finally specify the values for vertical start, vertical end, horizontal start, horizontal end, movement increment, movement speed in milliseconds, and the time to wait before starting in milliseconds.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Object Mover</title>
<style type="text/css">
<!--
.wait {
font-family: verdana;
font-size: 20px;
color: navy;
}
.aim {
position: absolute;
top: -250px;
left: -250px;
visibility: visible;
z-index: 1;
}
// -->
</style>

</head>
<body>
<div align="center" class="wait"><p>Please hold.</div>

<div id="earth" class="aim"><img
src="../../images/earth.gif" width="248" height="240"
alt="earth"></div>

<script language="JavaScript">
<!--
// Script: Animated Object
// Version: 1.1
// Last Updated: June 12th 1998
// Author: Scott Brady
// Org: HotSource HTML Help
// Email: hotsrc@earthlink.net
// Website: http://interweb.simplenet.com/Hotsource/index.shtml
// Copyright: Original Code Copyright (c) Scott Brady 1998
// Use: This script is free to be used and modified as
// long as these credits remain intact.

// 1. Change 'earth' to the id of your layer
var animated = "earth";

// set up variables
var browser=navigator.appName;
var version=navigator.appVersion;
var count = "ss";
var diditgo = '';
var hinc = '';

// figure out which "document" etc. to use
if (browser.indexOf("Netscape") >= 0 && version.indexOf("4.") >= 0) {
var whichdoc = "document." +animated+ "";
}
else if (browser.indexOf("Microsoft") >= 0 && version.indexOf("4.") >= 0) {
var whichdoc = "document.all." +animated+ ".style";
}

// animation function
function moveIt(startv, endv, starth, endh, inc, speed) {
if (startv <= endv && diditgo != "down") {
// if this is the first time
if (count == "ss") {
eval(vtotal = (endv - startv));
eval(vinc = (vtotal / (vtotal / inc)));

eval(htotal = (endh - starth));
eval(hinc = (htotal / (vtotal / inc)));
}
count="gg";
diditgo="up";
eval(whichdoc + '.top = (startv += vinc)');
eval(whichdoc + '.left = (starth += hinc)');
// start it over again
setTimeout('moveIt(' + startv + ',' + endv + ',' + starth + ',
' + endh + ',' + inc + ',' + speed + ')', speed);
}
else if (endv <= startv && diditgo != "up") {
// if this is the first time
if (count == "ss") {
eval(vtotal = (startv - endv));
eval(vinc = (vtotal / (vtotal / inc)));

eval(htotal = (starth - endh ));
eval(hinc = (htotal / (vtotal / inc)));
}
count="gg";
diditgo="down";
eval(whichdoc + '.top = (startv -= vinc)');
eval(whichdoc + '.left = (starth -= hinc)');
// start it over again
setTimeout('moveIt(' + startv + ',' + endv + ',' + starth + ',
' + endh + ',' + inc + ',' + speed + ')', speed);
}
}

// 2. Change the following to the desired values.
// They are in the following format:
// setTimeout('moveIt('vertical start', 'vertical end', 'horizontal start', 'horizontal end', 'movement increment', 'movement speed in milliseconds')', 'time to wait before starting in milliseconds');
setTimeout('moveIt(-250,-80,-250,-80,2,75)', 5000);
// -->
</script>

</body>
</html>

Notes:

  1. Customize the script as stated above.
  2. To ensure the code is copied correctly, please click here.

See it in action.