JavaScripts -> Mauseffekte -> Blasen steigen vom Mauszeiger auf

<script type="text/javascript">
<!--
// = = ============================================================ = =
// = = Bubbles v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ============================================================ = =

// --------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// --------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// --------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// --------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung / Usage:
// ==================
// Sie müssen diesen Script-Block nur einbinden, sonst ist nichts zu beachten.
// Simply include this script block.

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var picurl="/pics/examples/bubble.gif"; // URL des Blasen-Bildes / URL of bubble image

var upspeed=10; // Steigegeschwindigkeit / rising speed
var sidemax=5; // Maximale seitliche Geschwindigkeit / maximum side speed

var speed=100; // Aktualisierungsgeschwindigkeit / update speed
var lifetime=10; // Lebenszeit der Blasen / lifetime of bubbles
var spawninterval=200; // Erstellungshäufigkeit / creation interval

var maxdim=32; // Maximale Blasengröße / maximum bubble size

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var mousex=0,mousey=0;

function movebubble(id,step) {
  var size,oldsize,oldx,oldy;
  var bubble;
  bubble=document.getElementById(id);
  step++;
  if(step>lifetime) bubble.parentNode.removeChild(bubble);
  else {

    oldsize=parseInt(bubble.style.width);
    oldx=parseInt(bubble.style.left)+Math.floor(oldsize/2);
    oldy=parseInt(bubble.style.top)+Math.floor(oldsize/2);
    if(step>(lifetime/3))size=maxdim-Math.floor((maxdim-1)*((step-(lifetime/3))/(2*(lifetime/3))));
    else size=maxdim-Math.floor((maxdim-1)*(((lifetime/3)-step)/(lifetime/3)));
    bubble.style.width=size+"px";
    bubble.style.height=size+"px";
    bubble.style.top=(oldy-upspeed-Math.floor(size/2))+"px";
    bubble.style.left=(oldx-sidemax+Math.floor(Math.random()*(2*sidemax+1))-Math.floor(size/2))+"px";
    window.setTimeout("movebubble('"+id+"',"+step+")",speed);
  }
}

function spawnbubble() {
  var bubble,id;
  id="bubble_"+Math.floor(Math.random()*1000000);
  bubble=document.createElement("img");
  bubble.setAttribute("src",picurl);
  bubble.setAttribute("alt","");
  bubble.setAttribute("id",id);
  bubble.style.border="0px none";
  bubble.style.position="absolute";
  bubble.style.width="1px";
  bubble.style.height="1px";
  bubble.style.left=mousex+"px";
  bubble.style.top=mousey+"px";
  pointer=document.getElementsByTagName("body")[0].appendChild(bubble);
  window.setTimeout("movebubble('"+id+"',0)",speed);
}


function startbubbling() {
  window.setInterval("spawnbubble()",spawninterval);
}



function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
}

document.onmousemove=capturemaus;
startbubbling();

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Bubbles --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 21.Mar.2004 --
// ----------------------------
//-->
</script>

<style type="text/css">
body {background-color:#0000c0}
</style>
</body>
</html>