Hi Aqua-Beast,
is this working example simple enough for you...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>move image</title>
<base href="http://achelous.mysite.wanadoo-members.co.uk/"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">
<!--
body {
background-color:#eef;
color:#000;
}
#image {
position:absolute;
top:0px;
left:0px;
width:160px;
height:108px;
line-height:108px;
background-image:url(ball.gif);
background-color:#eef;
font-family:verdana,arial,hevetica,sans-serif;
font-size:12px;
color:#009;
text-align:center;
}
-->
</style>
<script type="text/javascript">
<!--
var i=0;
var speed=20;
function moveThis() {
document.getElementById('image').style.left=i+'px';
document.getElementById('image').style.top=i+'px';
if(i<500) {
i+=2;
setTimeout('moveThis()',speed);
}
}
//-->
</script>
</head>
<body>
<div id="image" onclick="moveThis()">click here</div>
</body>
</html>
I have used one image for this example but it can easily be modified for multiple images.