Results 1 to 6 of 6

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

  1. #1
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default how to set images in the bat script ?A

    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

  2. #2
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    so that the 3 images were different ?

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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

    javascriptfan (09-19-2011)

  5. #4
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Great, thank you!

    And how to different width and height for each image ?

  6. #5
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    how to set different width and height for each image ?

  7. #6
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •