Here is a sweet mouse pointer to pop on your website. It's the Blarfy mascott. On web compliant browsers the image
will explode when the mouse is clicked. On some browsers you will have to slam it against the sides of the window
to make it break up. Here is how to put it on your site:
1.) Put this into the head tags of your site:
<script language="javascript">
<script>
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouse
document.onmousedown = boom
mouseX = 0;
mouseY = 0;
function getMouse(e){
if (IE){
mouseX = event.clientX + document.body.scrollLeft
mouseY = event.clientY + document.body.scrollTop
}else{
mouseX = e.pageX
mouseY = e.pageY
}
setIdeal();
}
function setIdeal(){
for( i = 0; i < 6; i++ ){
idealX[i] = mouseX + displaceX[i];
idealY[i] = mouseY + displaceY[i];
}
}
//find distance to ideal position
function distance( x, y ){
var dist = Math.sqrt( (x*x) + (y*y) );
return dist;
}
//Variables
var height = screen.height - 200 ;
var width = screen.width - 60;
var i;
var dVX = 3;
var dVY = 3;
var mass = new Array(3,6,2,2,1,1);
var sinx;
var cosy;
var VX = new Array(0,0,0,0,0,0);
var VY = new Array(0,0,0,0,0,0);
var posX = new Array( 0,0,0,0,0,0 );
var posY = new Array( 0,0,0,0,0,0 );
var idealX = new Array( 0,0,0,0,0,0 );
var idealY = new Array( 0,0,0,0,0,0 );
var displaceX = new Array( -10,0,-10,31,-5,15 );
var displaceY = new Array( 3,31,43,43,91,92 );
var diffx;
var diffy;
var t;
function getPhysical(){
i = 0;
//adjust velocity
for( i = 0; i < 6; i++ ){
diffx = posX[i] - idealX[i];
diffy = posY[i] - idealY[i];
t = distance( diffx, diffy );
if( t != 0 ){
//diffx = diffx/t;
//diffy = diffy/t;
//ummm..
VX[i] = ( VX[i] - diffx*dVX/t );
VY[i] = ( VY[i] - diffy*dVY/t );
}
//adjust positon
//impact pmomentum change
if( t < 90 ){
VX[i] = VX[i] * .85;
VY[i] = VY[i] * .85;
}
//move to new position
posX[i] = posX[i] + VX[i];
posY[i] = posY[i] + VY[i];
//if its close enough.... im not sure if i like it...
if ( Math.abs( diffx*t ) < 1 ){ posX[i] = idealX[i]; }
if ( Math.abs( diffy*t ) < 1 ) { posY[i] = idealY[i]; }
//Comment above 2 lines to create wobbly guy
//elastic wall collisions
if( posX[i] < 0 ){ posX[i] = 0; VX[i] = -VX[i]*.75;}
if( posY[i] < 0 ){ posY[i] = 0; VY[i] = -VY[i]*.75;}
if( posX[i] > width){ posX[i] = width; VX[i] = -VX[i]*.75;}
if( posY[i] > height){ posY[i] = height; VY[i] = -VY[i]*.75;}
//change position of objects on screen
eval("divel=document.getElementById('sprite"+(i+1) + "');" );
divel.style.left = posX[i];
divel.style.top = posY[i];
}
setTimeout('getPhysical()',15);
}
function boom( mouse ){
//play explosion in IE
if (IE) document.boom.run()
//self.document.boom.play(false);
posY[0] -= 30;
VY[0] = -50;
posY[1] += 30;
VY[1] = 50;
posY[2] -=15;
posX[2] -=15;
VY[2] = -25;
VX[2] = -25;
posX[3] += 15;
posY[3] += 15;
VX[3] = 25;
VY[3] = -25;
posX[4] -=15;
posY[4] +=15;
VY[4] = 25;
VX[4] = -25;
posX[5] +=15;
posY[5] +=15;
VY[5] = 25;
VX[5] = 25;
}//boom
</script>
2.) Copy this into the body tag on your page:
onload="getPhysical()"
3.) And put this under the body tag on your page:
<embed src="boom.wav" hidden=true loop=false name="boom" autostart=false >
<DIV id="sprite1" style="position: absolute; top: 10px; left: 10px; z-index: 5;">
<img src="images/head.gif" >
</DIV>
<DIV id="sprite2" style="position: absolute; top: 10px; left: 10px; z-index: 2;">
<img src="images/body.gif" >
</DIV>
<DIV id="sprite3" style="position: absolute; top: 10px; left: 10px;">
<img src="images/hand-left.gif" >
</DIV>
<DIV id="sprite4" style="position: absolute; top: 10px; left: 10px;">
<img src="images/hand-right.gif" >
</DIV>
<DIV id="sprite5" style="position: absolute; top: 10px; left: 10px;">
<img src="images/foot-left.gif" >
</DIV>
<DIV id="sprite6" style="position: absolute; top: 10px; left: 10px;">
<img src="images/foot-right.gif" >
</DIV>
4.) Download all these images and toss them into a folder called 'images'.





