Results 1 to 3 of 3

Thread: Image move when clicked on page

  1. #1
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default Image move when clicked on page

    Okay, long time no visit
    I am in desperate and quick need of a Javascript that will move an image to somewhere on the page when the user clicks somewhere on the page.
    It is for a virtual world like Neopets.
    Please help me someone, and quick.
    Daba! The Fantage-like website
    Virtual World in progress.
    Out of pure HTML, Javascript, and CSS. Oh, and poorly done Paint images.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    <script type="text/javascript">
    /*<![CDATA[*/
    function MoveTo(o){
     this.obj=document.getElementById(o.ID);
     this.ms=o.Duration;
     this.addevt(document,'mouseup','move');
    }
    
    MoveTo.prototype={
    
     move:function(e){
      var obj=this.obj,mse=this.mse(e);
      this.animate('left',obj,obj.offsetLeft,mse[0]-obj.width/2,new Date());
      this.animate('top',obj,obj.offsetTop,mse[1]-obj.height/2,new Date());
     },
    
     animate:function(mde,obj,f,t,srt){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
      if (isFinite(now)){
       obj.style[mde]=now+'px';
      }
      if (ms<oop.ms){
       setTimeout(function(){ oop.animate(mde,obj,f,t,srt); },10);
      }
      else {
       obj.style[mde]=t+'px';
      }
     },
    
     mse:function(e){
      if (window.event){
       var docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+docs[0],e.clientY+docs[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Cartoon1.gif" style="position:absolute;"/>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    new MoveTo({
     ID:'tst',
     Duration:1000
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    [Nicolas] (01-16-2012)

  4. #3
    Join Date
    Sep 2010
    Location
    Hi Stalker.
    Posts
    148
    Thanks
    16
    Thanked 3 Times in 3 Posts

    Default

    @vwphillips
    THANK YOU SO MUCH!!!! It's perfect!!!!!
    Oh my gosh you saved me so much time and money!!! THANK YOU!
    Daba! The Fantage-like website
    Virtual World in progress.
    Out of pure HTML, Javascript, and CSS. Oh, and poorly done Paint images.

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
  •