Fading random Images in and out

[flexxall]

Hello, I have a script for random images on my site. I would like to try to fade them in and out instead of them just switching. Heres what I have so far.

<script>
   var dymImg= new Array();
   var imgBase= new Array();
   imgBase[0] = "./images/random0.php?";
   imgBase[1] = "./images/random1.php?";
   imgBase[2] = "./images/random2.php?";
   imgBase[3] = "./images/random3.php?";
   imgBase[4] = "./images/random4.php?";
   imgBase[5] = "./images/random5.php?";
   imgBase[6] = "./images/random6.php?";
   imgBase[7] = "./images/random7.php?";
   imgBase[8] = "./images/random8.php?";
   imgBase[9] = "./images/random9.php?";
   
   var c = 0;
   function count()
   {
      c++;
      t=imgBase.length;
      for(n=0;n<t;n++)
      {
         dymImg[n].src=imgBase[n]+c;
      }
   }
   function init()
   {
      dymImg[0]= document.getElementById("dymImg0");
      dymImg[1]= document.getElementById("dymImg1");
      dymImg[2]= document.getElementById("dymImg2");
  dymImg[3]= document.getElementById("dymImg3");
  dymImg[4]= document.getElementById("dymImg4");
  dymImg[5]= document.getElementById("dymImg5");
  dymImg[6]= document.getElementById("dymImg6");
  dymImg[7]= document.getElementById("dymImg7");
  dymImg[8]= document.getElementById("dymImg8");
  dymImg[9]= document.getElementById("dymImg9");
      setInterval("count()",2000);
   }
   window.onload = init;
</script> 

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage0 { position: absolute; top: 325px; left: 114px; }
.cornerimage1 { position: absolute; top: 314px; left: 231px; }
.cornerimage2 { position: absolute; top: 310px; left: 468px; }
.cornerimage3 { position: absolute; top: 334px; left: 700px; }
.cornerimage4 { position: absolute; top: 200px; left: 150px; }
.cornerimage5 { position: absolute; top: 200px; left: 650px; }
.cornerimage6 { position: absolute; top: 250px; left: 212px; }
.cornerimage7 { position: absolute; top: 275px; left: 750px; }
.cornerimage8 { position: absolute; top: 118px; left: 150px; }
.cornerimage9 { position: absolute; top: 118px; left: 650px; } 
</style>
<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site.jpg" width="900" height="380"/>
    <a href=page0.php><img id="dymImg0" class="cornerimage0" src="./images/random0.php"/>
<a href=page1.php><img id="dymImg1" class="cornerimage1" src="./images/random1.php"/>
<a href=page2.php><img id="dymImg2" class="cornerimage2" src="./images/random2.php"/>
<a href=page3.php><img id="dymImg3" class="cornerimage3" src="./images/random3.php"/>
<a href=page4.php><img id="dymImg4" class="cornerimage4" src="./images/random4.php"/>
<a href=page5.php><img id="dymImg5" class="cornerimage5" src="./images/random5.php"/>
<a href=page6.php><img id="dymImg6" class="cornerimage6" src="./images/random6.php"/>
<a href=page7.php><img id="dymImg7" class="cornerimage7" src="./images/random7.php"/>
<a href=page8.php><img id="dymImg8" class="cornerimage8" src="./images/random8.php"/>
<a href=page9.php><img id="dymImg9" class="cornerimage9" src="./images/random9.php"/>
</div>

 

as discribed in this thread http://www.phpfreaks.com/forums/index.php/topic,264901.msg1248989.html#msg1248989

 

Any help on this would be great and thanx MadTechie for all you help so far