SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code JavaScript:
    <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>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,499
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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>

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Awesome code above, but this is simplerer rer rer :)

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •