inserting a fade into image rotator

Discussion in 'Web Design & Coding' started by theserene1, Jul 9, 2008.

  1. theserene1

    theserene1 OSNN One Post Wonder

    Messages:
    1
    Hi there
    I'm trying to build an image rotator but I cant seem to find the right code for fade to use in it or find the right place to put it to get it to work. Can someone advise on the fade in and fade out code to insert?
    Thank you kindly.
    The code is below


    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    // Comma separated list of images to rotate 
    var imgs = new Array('Site Images/11.jpg','Site Images/12.jpg','Site Images/13.jpg','Site Images/14.jpg','Site Images/15.jpg','Site Images/16.jpg','Site Images/17.jpg','Site Images/18.jpg','Site Images/19.jpg','Site Images/20.jpg','Site Images/21.jpg','Site Images/22.jpg');
    // delay in milliseconds between image swaps 1000 = 1 second 
    var delay = 4000;
    var counter = 0;
    function preloadImgs(){
      for(var i=0;i<imgs.length;i++){
        MM_preloadImages(imgs[i]);
      }
    }
    function randomImages(){
      if(counter == (imgs.length)){
        counter = 0;
      }
      MM_swapImage('rotator', '', imgs[counter++]);
      setTimeout('randomImages()', delay);
    }
    //-->
    </script>
    <style type="text/css">
    <!--
    .style3 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
    }
    .style4 {
     font-size: 10px;
     color: #666666;
    }
    .style5 {font-family: Arial, Helvetica, sans-serif}
    .style6 {font-size: 12px}
    .style7 {
     font-size: 10px;
     font-family: Arial, Helvetica, sans-serif;
     color: #666666;
    }
    a:link {
     color: #000000;
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
     color: #000000;
    }
    a:hover {
     text-decoration: none;
     color: #000000;
    }
    a:active {
     text-decoration: none;
     color: #000000;
    }
    -->
    </style>
    </head>
    <body onLoad="preloadImgs();randomImages();">
    <p>&nbsp;</p>
    <table width="550" height="582" align="center" cellpadding="0">
      <tr>
        <td width="8"><div align="left" class="style3">
            <div align="left"></div>
        </div>      <div align="center"></div></td>
        <td width="163"><span class="style3">Bobby Cheng Design Archive </span></td>
        <td width="96"><span class="style7">coming soon </span></td>
        <td width="112">&nbsp;</td>
        <td width="154"><div align="right" class="style3"><a href="news.htm">News</a></div></td>
        <td width="7"><a href="news.htm"></a></td>
      </tr>
      <tr>
        <td height="553" colspan="6"><div align="center">
          <p align="left"><span class="style3"><span class="style4"><img src="Site%20Images/11.jpg" name="rotator" width="550" height="550" border="0" align="baseline" class="style3" id="rotator" ><br>
          </span></span><span class="style5"><span class="style6"> </span></span></p>
        </div></td>
      </tr>
    </table>
    </body>
    </html>