PDA

View Full Version : Image move when clicked on page



[Nicolas]
01-15-2012, 04:35 AM
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.

vwphillips
01-15-2012, 09:49 AM
<!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>

[Nicolas]
01-16-2012, 02:57 AM
@vwphillips
THANK YOU SO MUCH!!!! It's perfect!!!!!
Oh my gosh you saved me so much time and money!!! THANK YOU!
:D