Bubbles

2. Obtain the Script

To make bubbles on your web page you first need to select the code from the text box below (there is a highlight all button beneath it to make this easier) and copy it into a file called bubbles.js.

// Bubbles Javascript
// copyright 23rd February 2006, by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
// you can change the number of bubbles if you like

var num_bubbles = 15;
var bubbles = ["http:\/\/z.about.com\/d\/javascript\/1\/0\/0\/1\/bubble.gif"];

// window size tests
function findLivePageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:700;}function findLivePageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:500;}
function posX() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posY() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}

// make bubbles
var speed = 50;var movw = new Array();var move = new Array();var stepw = new Array();var posw = new Array();var posh = new Array();var dir = new Array();var winWidth;var winHeight;
function setSize() {winWidth = findLivePageWidth()-50;winHeight = findLivePageHeight()-50;}
function startBubbles() {setSize(); var content = ''; for (var i = 0; i < num_bubbles; i++){move[i] = 0;movw[i] = 11+ Math.random()*4;posw[i] = Math.random()*(winWidth-35)+12;posh[i] = Math.random()*winHeight;stepw[i] = 0.02 + Math.random()/10;dir[i] = (Math.random()>0.5)?1:-1;content += '<div id="bub'+ i +'" style="position: absolute; z-index: '+ i +'; visibility:hidden;" onclick="posh['+i+']=-50;"><img src="'+bubbles[Math.floor(Math.random()*bubbles.length)]+ '" border="0"></div>';} document.getElementById('bubble').innerHTML = content;setTimeout("moreBubbles()", speed);}
function moreBubbles() {for (var i = 0; i < num_bubbles; i++) {if (posh[i] < 0) {posw[i] = 10+ Math.random()*(winWidth-movw[i]-30);posh[i] = winHeight;dir[i]=(Math.random()<0.5)?1:-1;stepw[i] = 0.02 + Math.random()/9;} move[i] += stepw[i] *dir[i];  posh[i]-=1; if (Math.abs(move[i]) > 3) {dir[i]=-dir[i];posw[i]+=movw[i]*move[i]; move[i]=0;} objstyle = document.getElementById('bub'+i).style; objstyle.left = posX()+posw[i] + movw[i]*move[i]; objstyle.top = posY()+posh[i] - 1;objstyle.visibility = 'visible';} setTimeout("moreBubbles()", speed);}
window.onload = startBubbles; window.onresize = setSize;

The only line in the Javascript that you may want to alter is the one that sets the number of bubbles that are displayed.

The other thing that you will need to copy is the bubble image. To do this in most browsers simply right click on the double sized static bubble image at the start of this paragraph and select save picture as or save image (depending on which browser you are using). You need to save the image as bubble.gif. If you are not puting the image in the same folder as the web page then you will need to update the bubbles variable to reflect the correct location of the image in order for the script to work. If you don't want to use the image supplied, you are welcome to use your own image and if you want more than one image just add more images to the bubbles array separating the filenames with commas.

Now all that remains is to add the script to your page.

Sample Page | Obtain the Script | Add to Your Page

Apply now to guide this site

Discuss in our forum

Bubbles

2. Obtain the Script

Join the Discussion

More of this Feature

Related Terms