DHTML

Moving Background
Moving Objects
Rollover
Pulldown Menu
Preloading
Drag'n'Drop
Scrolling Text
Teletype
Shoot Me!
Animation
ActiveX
Opacity
Transition
Mad Bubbles
Gates

JavaScript


Books

Russian | Main Page


Useful links:







Mad Bubbles | Description

If you want to use any of this examples, please put a link to our site.
Here you can find HTML-code for such link.
<HTML>
<HEAD>
<title>www.redmount.com - DHTML - Mad Bubbles</title>
</HEAD>

<body bgcolor="Black" text=white vlink=silver link="Yellow" vlink="#FF8000"  leftmargin=15 topmargin=15>

<script language=javascript>
  B=document.all;
  C=document.layers;
  T1=new Array("movepic1.gif",30,30,"movepic2.gif",27,27,"movepic3.gif",24,24,"movepic4.gif",21,21,"movepic5.gif",18,18,"movepic6.gif",15,15)
  nos=parseInt(T1.length/3)
  rate=50
  iefix1=0;
  iefix2=0;
  for (i=0;i<nos;i++)
  {
    createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")
  }

  function createContainer(N,Xp,Yp,W,H,At,HT,Op,St)
  {
    with (document)
    {
      write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; z-index:-1");
      if(St)
      {
        if (C)
          write(" style='");
        write(St+";' ")
      }
      else
        write((B)?"'":"");
      write((At)? At+">" : ">");
      write((HT) ? HT : "");
      if (!Op)
        closeContainer(N)
    }
  }
  function closeContainer()
  {
    document.write((B)?"</div>":"</layer>")
  }
  function getXpos(N)
  {
    return (B) ? parseInt(B[N].style.left) : C[N].left
  }
  function getYpos(N)
  {
    return (B) ? parseInt(B[N].style.top) : C[N].top
  }
  function moveContainer(N,DX,DY)
  {
    c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY
  }
  function cycle()
  {
    if (document.all)
    {
      iefix1=document.body.scrollLeft;
      iefix2=document.body.scrollTop;
    }
    for (i=0;i<(nos-1);i++)
    {
      moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))
    }
  }

  function newPos(e)
  {
    moveContainer("CUR"+(nos-1),(B)?event.clientX+iefix1:e.pageX+2,(B)?event.clientY+iefix2:e.pageY+2)
  }

  if(document.layers)
    document.captureEvents(Event.MOUSEMOVE)
  else
  if(B)
    document.body.onscroll=newPos
  document.onmousemove=newPos
  setInterval("cycle()",rate)
</script>


</BODY>
</HTML>