TinyPortal
Development => Block Codes => Topic started by: akulion on 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 :P
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 :)
<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>
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 (http://path-to-peace.net/forum/coppermine/)