Floating images script

**bobbisox** · 01-31-2012, 03:57 PM

1) Script Title: Floating images script

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

3) Describe problem: I need to know how to replace the balloons with my own image. I'm confused as I don't see where my .jpg would be inserted to replace the balloon image in the script.
Can anyone help me with this? Thanks

**vwphillips** · 02-01-2012, 01:30 PM

this should be easier to understand

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 zIndex=101;

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

function Chip(src,width,height){
 var img=document.createElement('IMG'),wwhs=WWHS();
 img.src=src;
 img.style.position='absolute';
 img.style.zIndex=typeof(window['zIndex'])=='number'?zIndex:'101';
 if (typeof(width)=='number'){
  img.width=width;
 }
 if (typeof(height)=='number'){
  img.height=height;
 }
 document.body.appendChild(img);
 this.img=img;
 this.vx=vmin+vmax*Math.random();
 this.vy=vmin+vmax*Math.random();
 this.w=width+20;
 this.h=height;
 this.xx=wwhs[2]+Math.random()*(wwhs[0]-50);
 this.yy=wwhs[2]+Math.random()*(wwhs[1]-50);;
 this.timer1=null;
 movechip(this);
}

function movechip(chip){
  var w=chip.img.width+20,h=chip.img.height,wwhs=WWHS();
  if (document.getElementById){

   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;

   if(chip.xx<=wwhs[2]){
	  chip.xx=wwhs[2];
      chip.vx=vmin+vmax*Math.random();
     }
   if(chip.xx>=wwhs[2]+wwhs[0]-w){
	  chip.xx=wwhs[2]+wwhs[0]-w;
      chip.vx=-vmin-vmax*Math.random();
     }
   if(chip.yy<=wwhs[3])
     {chip.yy=wwhs[3];
      chip.vy=vmin+vmax*Math.random();
     }
   if(chip.yy>=wwhs[3]+wwhs[1]-h)
     {chip.yy=wwhs[3]+wwhs[1]-h;
      chip.vy=-vmin-vmax*Math.random();
     }

   chip.img.style.left=chip.xx+"px";
   chip.img.style.top=chip.yy+"px";


   chip.timer1=setTimeout(function(){ movechip(chip); },100);
  }
}

function WWHS(){
  if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
  else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
  return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
 }



</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
***********************************************/


function pagestart(){
// add or delete more of the below lines :
//  parameter 0 = the image src. (string)
//  parameter 1 = the image width. (number, default the natural image width)
//  parameter 2 = the image height. (number, default the natural image height)
 new Chip("http://www.dynamicdrive.com/ballon2.gif",47,68);
 new Chip("http://www.dynamicdrive.com/ballon3.gif",47,68);
 new Chip("http://www.dynamicdrive.com/ballon4.gif",47,68);


//Step 3: Using the same variable names as 1), add or delete more of the below lines:

}

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>

</body>

</html>

Thread: Floating images script

Thread Tools

Search Thread

Floating images script

Bookmarks

Bookmarks

Posting Permissions