PDA

View Full Version : 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


<!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>