Two Hoots Software Mouse Bubbles Javascript

The following code shows how this bubble effect is generated. The script was sourced from Kurt Grigg's website and there is a link to the site at the bottom of the page

First create Image0 as a new image object. This object has a number of properties including width, height, border. We'll set the src attribute which points to the gif file we required.

Image0 = new Image();
Image0.src = "../images/bubblack.gif";

Now set up the parameters required for the bubbles.

// number of bubbles to show
Amount = 20;
// set start position from mouse if we can't determine it 
Ymouse = -50;
Xmouse = -50;
// create arrays to store details for each bubble
// bubble position
Ypos = new Array();
Xpos = new Array();
// speed of position change
Speed = new Array();
// rate of size change
rate = new Array();
// current size
grow = new Array();
// position change
Step = new Array();
// initial position in relation to mouse
Cstep = new Array();
// variables for Netscape
// Size of bubble
nsSize = new Array();
// document.layers is only available with Navigator so set it to 1 if Netscape
// else set it to 0. ? is the conditional operator. If the preceding expression
// equates to true then use the first operand after the ?. If the expression
// is false then use the second operand.
ns = (document.layers)?1:0;

The last line in the above section determines whether the browser supports layers. Each bubble is created in it's own layer, which is handled differently in Netscape that Internet Explorer. Now capture the mouse move event if the browser supports the document.layers property.

(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;

The Mouse function captures the relative position of the event. If document.layers is true then it captures the document-relative X/Y co-ordinate of the event, else the X/Y position of the event relative to a dynamically positioned contained. These values are stored in the Ymouse and Xmouse variables.

function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

Now build up the initial arrays for the bubbles. Perform the loop for each bubble. Math.Random returns a random number between 0.0.and 1.0.

// loop around for each bubble
for (i = 0; i < Amount; i++) {
  // set initial position in relation to current mouse position
  Ypos[i] = Ymouse;
  Xpos[i] = Xmouse;
  // set the speed  and rate of movement
  Speed[i] = Math.random()*4+1;
  Cstep[i] = 0;
  Step[i] = Math.random()*0.1+0.05;
  grow[i] = 8;
  nsSize[i] = Math.random()*15+5;
  rate[i] = Math.random()*0.5+0.1;
}

Now create the layers either using the LAYER tag for Netscape or the DIV tag for other browsers.

if (ns) {
  // Netscape here
  for (i = 0; i < Amount; i++) {
    // Create individual layer for bubble
    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+Image0.src+" 
      name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
    }
  }
else {
  // non Netscape browsers
  document.write('<div style="position:absolute;
    top:0px;left:0px"><div style="position:relative">');
  for (i = 0; i < Amount; i++) {
    document.write('<img id="si" src="'+Image0.src+'" style="position:absolute;
      top:0px;left:0px;filter:alpha(opacity=90)">');
    }
  document.write('</div></div>');
}

The MouseBubbles function performs the bubble movement and growth. The hscrll and wscrll determine the current scroll positions. The Window.PageOffset function returns the number of pixels the current document has been scrolled. By including setTimeout function within MouseBubbles the function will be repeatedly called.

function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
  // loop around each bubble setting new position and size
  sy = Speed[i] * Math.sin(270 * Math.PI / 180);
  sx = Speed[i] * Math.cos(Cstep[i] * 4);
  Ypos[i] += sy;
  Xpos[i] += sx; 
  if (Ypos[i] < -40) {
    Ypos[i] = Ymouse;
    Xpos[i] = Xmouse;
    Speed[i] = Math.random() * 6 + 4;
    grow[i] = 8;
    nsSize[i] = Math.random() * 15 + 5;
  }
  if (ns) {
    // update Netscape layers
    document.layers['sn'+i].left = Xpos[i] + wscrll;
    document.layers['sn'+i].top = Ypos[i] + hscrll;
  }
  else {
    // Non Netscape - move image position
    si[i].style.pixelLeft = Xpos[i] + wscrll;
    si[i].style.pixelTop = Ypos[i] + hscrll;
    si[i].style.width = grow[i];
    si[i].style.height = grow[i]; 
  }
  grow[i] += rate[i]; 
  Cstep[i] += Step[i];
  if (grow[i] > 24) grow[i] = 25;
}
// Set the timeout for calling Mouse Bubbles
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();