Moving an image using javascript

Hi again,

one of the peices of work i am trying to do at college is to have an image on a page that displays in the middle and two buttons that make it move from top left cornor of the web page to the bottom right corner of the web page.

iv browsed through website but didnt really understand what to do.
i found the w3c tutorial on this helpful but i do not know how to get the image to go from top left to bottom right on click.

Kind Regards

Adam


<html>

<script type="text/javascript">

function moveleft()
{
document.getElementById('image').style.position="absolute";
document.getElementById('image').style.left="0";
}
function moveback()
{
document.getElementById('image').style.position="absolute";
}


</script>





<body>

<img id="image" src="./face.gif"
onclick="moveleft()"
onclick="moveback()" />

</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#img {
  width:100px;height:50px;
}
/*]]>*/
</style></head>

<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input type="button" name="" value="TL" onmouseup="M1.move('TL');" />
<input type="button" name="" value="BR" onmouseup="M1.move('BR');" />
<center><img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</center>
<script type="text/javascript">
/*<![CDATA[*/

function Move(o){
 var oop=this,img=document.getElementById(o.ImageID),br,tl,ms=o.Duration,c;
 if (img){
  c=document.createElement('IMG');
  c.src=img.src;
  c.style.position='fixed';
  c.style.visibility='hidden';
  br=c.cloneNode(false);
  br.style.right='0px';
  br.style.bottom='0px';
  br.style.width=img.width+'px';
  br.style.height=img.height+'px';
  document.body.appendChild(br);
  oop.BR=br;
  tl=c.cloneNode(false);
  tl.style.left='0px';
  tl.style.top='0px';
  tl.style.width=img.width+'px';
  tl.style.height=img.height+'px';
  document.body.appendChild(tl);
  oop.TL=tl;
  oop.img=img;
  c.style.position='absolute';
  c.style.zIndex='101';
  c.style.left='-3000px';
  c.style.top='-3000px';
  c.style.width=img.width+'px';
  c.style.height=img.height+'px';
  oop.c=c;
  document.body.appendChild(c);
  oop.ms=ms;
 }
}

Move.prototype={

 move:function(s){
  var oop=this,to=oop[s],p=oop.pos(oop.img);
  if (to){
   oop.img.style.visibility='hidden';
   oop.c.style.visibility='visible';
   to=oop.pos(to);
   oop.animate('left',p[0],to[0],new Date(),oop.ms,s+'l');
   oop.animate('top',p[1],to[1],new Date(),oop.ms,s+'t');
  }
 },
 animate:function(mde,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   oop.c.style[mde]=now+'px';
  }
  if (ms<mS){
   oop[to]=setTimeout(function(){ oop.animate(mde,f,t,srt,mS,to); },10);
  }
  else {
   oop.c.style[mde]=t+'px';
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 }

}

M1=new Move({
 ImageID:'img',
 BRAnchorID:'br',
 TLAnchorID:'tl',
 Duration:1000
});
/*]]>*/
</script>
</body>

</html>

<html>
<head>
<script type=“text/javascript”>

function start_pos()
{
document.getElementById(“img”).style.top = ‘550px’;
document.getElementById(“img”).style.left = ‘550px’
}

function right() //Moves image to the right

{
document.getElementById(“img”).style.top = ‘400px’;
document.getElementById(“img”).style.left = ‘1000px’;
}

function left() //moves image to the left

{
document.getElementById(“img”).style.top = ‘0px’;
document.getElementById(“img”).style.left = ‘0px’;
}

</script>
</head>

<body>

<style>
DIV.movable { position:absolute; TOP:550px; LEFT:550px; }
</style>

<div id=“img” class=“movable”><img src="your_picture.jpg "/></div <!image>

<p>
<button type=“button” onclick = “left()”>Image to the left!</button>
<button type=“button” onclick = “start_pos()”>Reset imaget</button>
<button type=“button” onclick = “right()”>image to the right!</button>
</p>

</body>
</html>

This just moves the movable div containing your image to pre defined coordinates. I dont know how to set the image to the actual bottom right, as using different reseloutions will change where the actual bottom right is. but this should help to pass the colleges requirments. :slight_smile: