Screenmate / Virtual pet

akulion · December 13, 2006, 09:02:17 PM

hi

this is pretty cute - but some may find it annoying but either ways its a neat thingie...

In this I have only put one small animation of an alien, but u could use anything u like - any small animated gif from the net - whether its a flying angel or a dancing bear is up to u

Demo can be found on: http://goofy-goobers.com/forum

To install copy the alien gif attached to this post and upload to ur forum root

and the put this code in a script box - now one thing to know here is if you choose the block to be collapsible, then pressing the collapse button turns the screen mate off and expanding it makes him visible again...so u can use it as an on off switch if u like

oh and one more thing change the link goofy-goobers.com (right near the end of the code) to your own page or whatever you want or if you prefer u can remove the link altogether by removing the A href tag

Code Select


<head><script language="javascript">

var maxX=2;  // MAX HORIZ PIXEL STEPS
var maxY=2;  // MAX VERT PIXEL STEPS

var ns4=(document.layers)?true:false;
var ie4=(document.all && !document.getElementById)?true:false;
var ie5=(document.all && document.getElementById)?true:false;
var ns6=(document.getElementById&&navigator.appName.indexOf("Netscape")>=0)?true:false;
var w3c=(document.getElementById)?true:false;
var ww=0; var wh=0;
var ydir=true; var xdir=true;
var floatobj; 
var x=0; var y=0;
var stepX=1;
var stepY=1;

function getwindowsize(){
ww=(ie4||ie5)?document.body.clientWidth:window.innerWidth;
wh=(ie4||ie5)?document.body.clientHeight:window.innerHeight;
}

function randomdir(){
if(Math.floor(Math.random()*2))stepX=Math.floor(Math.random()*maxX)+1;
if(Math.floor(Math.random()*2))stepY=Math.floor(Math.random()*maxY)+1;
if(Math.floor(Math.random()*2))xdir=(Math.floor(Math.random()*2))?false:true;
if(Math.floor(Math.random()*2))ydir=(Math.floor(Math.random()*2))?false:true;
setTimeout('randomdir()', Math.floor(Math.random()*5000)+600);
}

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(){
var sx=(ie4||ie5)?document.body.scrollLeft:pageXOffset;
var sy=(ie4||ie5)?document.body.scrollTop:pageYOffset;
var tp=(ns4)?floatobj.top:parseInt(floatobj.style.top);
var lf=(ns4)?floatobj.left:parseInt(floatobj.style.left);
var tx,ty;
if(ydir){
if(tp+stepY>=wh+sy-floatobj.ih-4){
ydir=false;
ty=tp-stepY;
}else ty=tp+stepY;
}else{
if(tp-stepY<=sy){
ydir=true;
ty=tp+stepY;
}else ty=tp-stepY;
}
if(xdir){
if(lf+stepX>=ww+sx-floatobj.iw-3){
xdir=false;
tx=lf-stepX;
}else tx=lf+stepX;
}else{
if(lf-stepX<=sx){
xdir=true;
tx=lf+stepX;
}else tx=lf-stepX;
}
moveid(floatobj,tx,ty);
}

window.onload=function(){
  floatobj=(ns4)?document.layers['floatobj']:(ie4)?document.all['floatobj']:document.getElementById('floatobj');
  floatobj.iw=(ns4)?floatobj.document.images["float"].width:document.images["float"].width;
  floatobj.ih=(ns4)?floatobj.document.images["float"].height:document.images["float"].height;
  if(ns6){
  floatobj.iw+=10;
  floatobj.ih+=10;
  } 
  getwindowsize();
  x=ww/2;
  y=wh/2;
  moveid(floatobj,x,y);
  randomdir();
  setInterval('animate()',50);
}


window.onresize=function(){
  if(ns4)setTimeout('history.go(0)',400);
  else getwindowsize();
}
</script>

</style>

</head>
<div id="floatobj" style="width:46px; height:38px; position:absolute; left:0px; top:-200px; z-index:10000">
<a href="http://goofy-goobers.com"><img src="space.gif" border="0" width=46 height=38 name="float"></a>
</div>

akulion · December 14, 2006, 01:05:11 AM

I have also added a "random pet / image" funcionality to the script

So that with each page load there is a different image loaded. You can see the demo at my live site http://path-to-peace.com/forum

As for instructions just download the file attached to this post and follow instructions in the readme.txt file in it :up:

Also for additional 'cute' graphics and animations you can visit my graphics collection with over 4000+ graphics in it at: Aku's Graphics

Recent

User

Stats

Members

Stats

Users Online

Screenmate / Virtual pet

akulion

akulion