Floating Balloons Script

**Website Designer Girl** · 04-02-2012, 04:04 AM

1) Script Title: Floating images script All

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/flyimage.htm

3) Describe problem:

Hi everyone,

This script displays floating balloons that
I have already gotten to work perfectly.

The only problem is that the balloons are floating all over my page
and blocking text on the website page which that is what is
supposed to happen anyway if you look at the page that
I got the code from.

What I want to do is take this same code and make the balloons
only float on the left and right hand side of the website page
and not over top of the website page. If I can get the
balloons to only float over my background image, I will
be so happy with that.

My website page is designed in HTML and CSS.
Can anyone please help me?

Thanks so much,
Website Designer Girl

**vwphillips** · 04-02-2012, 09:29 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript" >
/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


var vmin=2;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function Chip(chipname,width,height){
 this.named=chipname;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width+20;
 this.h=height;
 this.xx=0;
 this.yy=0;
 this.timer1=null;
}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
   if (window.innerWidth || window.opera){
		 pageX=window.pageXOffset;
     pageW=window.innerWidth-40;
     pageY=window.pageYOffset;
     pageH=window.innerHeight-20;
    }
   else if (document.body){
		 pageX=iecompattest().scrollLeft;
     pageW=iecompattest().offsetWidth-40;
     pageY=iecompattest().scrollTop;
     pageH=iecompattest().offsetHeight-20;
    }

   chip.xx=chip.xx+chip.vx;
   chip.yy=chip.yy+chip.vy;

   chip.vx+=vr*(Math.random()-0.5);
   chip.vy+=vr*(Math.random()-0.5);
   if(chip.vx>(vmax+vmin))  chip.vx=(vmax+vmin)*2-chip.vx;
   if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
   if(chip.vy>(vmax+vmin))  chip.vy=(vmax+vmin)*2-chip.vy;
   if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

   var chipobj=document.getElementById(chip.named);
   var max=chipobj.parentNode.offsetWidth;

   if(chip.xx<=0){
			chip.xx=0;
      chip.vx=vmin+vmax*Math.random();
     }
   if(chip.xx>=max-chip.w){
			chip.xx=max-chip.w;
      chip.vx=-vmin-vmax*Math.random();
     }
   if(chip.yy<=pageY)
     {chip.yy=pageY;
      chip.vy=vmin+vmax*Math.random();
     }
   if(chip.yy>=pageY+pageH-chip.h)
     {chip.yy=pageY+pageH-chip.h;
      chip.vy=-vmin-vmax*Math.random();
     }
chipobj.style.left=chip.xx+"px";
chipobj.style.top=chip.yy+"px";


   chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
  }
}



</script>
<script type="text/javascript">

/***********************************************
* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)
* Modified by Dynamic Drive for various improvements
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Step 1: Define unique variable names depending on number of flying images (ie:3):
var flyimage1, flyimage2, flyimage3,flyimage4, flyimage5, flyimage6

function pagestart(){
//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):
 flyimage1=new Chip("flyimage1",47,68);
 flyimage2=new Chip("flyimage2",47,68);
 flyimage3=new Chip("flyimage3",47,68);

 flyimage4=new Chip("flyimage4",47,68);
 flyimage5=new Chip("flyimage5",47,68);
 flyimage6=new Chip("flyimage6",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:
movechip("flyimage1");
movechip("flyimage2");
movechip("flyimage3");

movechip("flyimage4");
movechip("flyimage5");
movechip("flyimage6");

}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart

</script></head>

<body>
<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->
<div style="position:absolute;left:0px;top:0px;width:300px;height:300px;border:solid red 1px;">
<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>
</div>

<div style="position:absolute;left:600px;top:0px;width:300px;height:300px;border:solid red 1px;">
<DIV ID="flyimage4" STYLE="position:absolute; left: -1500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage5" STYLE="position:absolute; left: -1500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>

<DIV ID="flyimage6" STYLE="position:absolute; left: -1500px; width:47; height:68;">
<A HREF="http://dynamicdrive.com"><IMG SRC="test.gif" BORDER=0></a>
</DIV>
</div>
</body>

</html>

**Website Designer Girl** · 04-02-2012, 04:09 PM

Thanks VW for the code that you posted.
I tried the code out and it does not work.
The ballooons will not stay on the left and right hand side.
I only saw the left and right containers in your code
when I viewed the code in my browser.

I think the Java Script for the balloons needs
to be edited in order to make this work.

Do you have anymore ideas to help me?
I was really hoping that your code would work.

If we can make the balloons stay inside of its own
DIV on the left and also in its own DIV on the right or if one can
make the balloons appear in an overlay over the background only.

Right now, the balloons are floating all over the page
and blocking text and images on the entire website
which is not what I want to happen at all.

My CSS Code for my website container
and website background is below:

#container {
margin-right: auto;
margin-left: auto;
width: 965px;
border: 3px dashed #f8180c;
background-color: #FFF;
background-repeat: repeat;
padding-top: 2px;
text-align: center;
padding-bottom: 0px;

body {
background-image: url(http://www.backgroundimagelinkhere.com);
background-repeat: repeat;
background-color: #f7180c;
}

Thanks so much.

**Website Designer Girl** · 04-02-2012, 10:58 PM

Can anyone please help me?

There has to be some way
to edit the java script file
in order to keep the balloons
only floating on the top of the
website background and not
on top of the entire website page.

Thread: Floating Balloons Script

Thread Tools

Search Thread

Floating Balloons Script

Bookmarks

Bookmarks

Posting Permissions