how to set images in the bat script ?A

**javascriptfan** · 09-18-2011, 02:59 PM

Hello everybody!

If you know how pls help me with how to set different images in this script:

http://www.dynamicdrive.com/dynamicindex4/bats.htm

**javascriptfan** · 09-18-2011, 08:59 PM

so that the 3 images were different ?

**vwphillips** · 09-19-2011, 07:42 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>
</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
*/

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

var ns6=document.getElementById&&!document.all
bats=new Array(3)
 if (document.all||ns6){
  document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');
  for (i=0; i < images.length; i++){
   if (document.all){
    document.write('<a href="http://www.dynamicdrive.com"><img src="'+images[i]+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0></a>')
   }
   else
    document.write('<a href="http://www.dynamicdrive.com"><img src="'+images[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')
   }
   document.write('</div></div>');
 }

yBase=xBase=currStep=a_count=0;
b_count=1;
c_count=2;
d_count=3;
move=1;
if (document.layers||ns6){
yBase=window.innerHeight/3;
xBase=window.innerWidth/6;
if (document.layers)
window.captureEvents(Event.MOUSEMOVE);

}
if (document.all){
yBase = window.document.body.offsetHeight/3;
xBase = window.document.body.offsetWidth/6;
}

function dismisscupid(){
clearInterval(flycupid)
if (document.layers){
for (i2=0; i2 < images.length; i2++){
document.layers['n'+i2].visibility="hide"
}
}
else if (document.all)
document.all.out.style.visibility="hidden"
else if (ns6)
document.getElementById("out").style.visibility="hidden"
}

if (document.layers){
for (i=0; i < images.length; i++)
document.layers['n'+i].document.images['nsi'].src=images[i]
}
else if (document.all){
for (i=0; i < images.length; i++)
document.all.msieBats[i].src=images[i]
}
else if (ns6){
for (i=0; i < images.length; i++)
document.getElementById("ns6Bats"+i).src=images[i]
}

function Animate(){
a_count+=move;
b_count+=move;
c_count+=move;
currStep+=step;
if (a_count >= bats.length) a_count=0;
if (b_count >= bats.length) b_count=0;
if (c_count >= bats.length) c_count=0;
if (document.layers){
for (i=0; i < images.length; i++) {
  var NewL="n"+i
  document.layers[NewL].top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
  document.layers[NewL].left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
  }
}

if (document.all){
for (i=0; i < images.length; i++){
  document.all.msieBats[i].style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
  document.all.msieBats[i].style.pixelLeft =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
 }
}

if (ns6){
for (i=0; i < images.length; i++){
  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)
  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)
 }
}

}
flycupid=setInterval('Animate()',30);
setTimeout("dismisscupid()",dismissafter*1000)
//-->
</script></body>

</html>

**javascriptfan** · 09-19-2011, 08:48 AM

Great, thank you!

And how to different width and height for each image ?

**javascriptfan** · 09-19-2011, 08:49 AM

how to set different width and height for each image ?

**javascriptfan** · 09-19-2011, 08:55 AM

I already find it how:

just need to remove width and height from this line

document.write('<a href="http://www.dynamicdrive.com"><img src="'+images[i]+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')

and each image will appear in own size.

Thread: how to set images in the bat script ?A

Thread Tools

Search Thread

how to set images in the bat script ?A

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

Bookmarks

Bookmarks

Posting Permissions