Flying Bats/Flying Cupids Script

**KennyP** · 04-20-2012, 07:32 AM

Hi guys:

In the Flying Bats/Flying Cupids script, would you please show me how to add an array of different images in the code below? For example, bat1gif., bat2.gif, bat3.gif, etc.

Code:

Cupid=new Image();
Cupid.src="bat.gif";  //specify path to bat image

Thanks,

Kenny

**vwphillips** · 04-20-2012, 03:19 PM

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

<body>

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

/*
Flying Bats- By Dynamic Drive, based on script by Kurt (kurt.grigg@virgin.net)
For full source, usage terms, and 100's more DHTML scripts
Visit http://www.dynamicdrive.com
*/

var ImageArray=["http://www.vicsjavascripts.org.uk/StdImages/One.gif","http://www.vicsjavascripts.org.uk/StdImages/Two.gif","http://www.vicsjavascripts.org.uk/StdImages/Three.gif","http://www.vicsjavascripts.org.uk/StdImages/Four.gif"];
var Xpos=700;  //cupids x coordinates, in pixel
var Ypos=200;  //cupids y coordinates, in pixel
var step=0.3;  //Animation speed (smaller is slower)
var dismissafter=15;  //seconds after which Cupids should disappear, in seconds

document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');
for (var i=0; i < ImageArray.length; i++){
 document.write('<a href="http://www.dynamicdrive.com"><img src="'+ImageArray[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')
}
document.write('</div></div>');

var currStep=0;

function dismisscupid(){
 clearInterval(flycupid)
 document.getElementById("out").style.visibility="hidden"
}


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];
}

function Animate(){
 currStep+=step;
 var wwhs=WWHS(),yBase = wwhs[1]/3,xBase = wwhs[0]/6;
 for (var i=0; i <ImageArray.length; i++){
  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)+wwhs[3]+'px';
  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)+wwhs[2]+'px';
 }

}

flycupid=setInterval('Animate()',30);
setTimeout("dismisscupid()",dismissafter*1000)

//-->
</script>
</body>

</html>

**KennyP** · 04-20-2012, 06:18 PM

vwphillips:

Thank you so much for your reply and the code addition. It works just great with any number of images.

Kenny

Thread: Flying Bats/Flying Cupids Script

Thread Tools

Search Thread

Flying Bats/Flying Cupids Script

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions