Moving images... Help plz. - HTML Forums

Aqua-Beast · 09-25-2005, 02:25 PM

Well I tyed a few diffrent scripts and non of them really work well and there very complecated and hard to customise...

I need a script that would have images moving from one point of a page to another. I dont want the images to be links or anything.. plz help.

(p.s. Thanks everyone, I have got a lot of help on this forum!

)

birdbrain · 09-25-2005, 03:51 PM

Hi Aqua-Beast,

is this working example simple enough for you...

Code:

<!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.