Help with image rotator

[flexxall]

I have two image rotators. one will rotate the image by swapping the pic with another and one will fade the image in and out. I have one that will allow placement of 10 rotation locations on top of the same background image ( what I want) but it does not fade the images. the other will fade the images but I can not get more than one instance on top of the same background image.  Could anyone assist me with getting one of these to achieve what I am looking for ? I can not post a link to the site as it is a localhost I am building on but I can paste any of the code needed to assist with this issue.

 

 

[flexxall]

Heres one of the scripts that I would like to try to add a fade to.

HTML page

<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: 315px; left: 24px; }
.cornerimage1 { position: absolute; top: 84px; left: 66px; }
.cornerimage2 { position: absolute; top: 325px; left: 181px; }
.cornerimage3 { position: absolute; top: 28px; left: 248px; }
.cornerimage4 { position: absolute; top: 331px; left: 326px; }
.cornerimage5 { position: absolute; top: 325px; left: 487px; }
.cornerimage6 { position: absolute; top: 28px; left: 638px; }
.cornerimage7 { position: absolute; top: 335px; left: 655px; }
.cornerimage8 { position: absolute; top: 68px; left: 769px; }
.cornerimage9 { position: absolute; top: 315px; left: 826px; } 
</style>

<div class="containerdiv">
    <img src="{T_IMAGESET_PATH}/site_adopt.jpg" width="900" height="380"/>
<a href=hatchlings.php><img id="dymImg0" class="cornerimage0" src="./images/random0.php"/>
<a href=hatchlings.php><img id="dymImg1" class="cornerimage1" src="./images/random1.php"/>
<a href=hatchlings.php><img id="dymImg2" class="cornerimage2" src="./images/random2.php"/>
<a href=hatchlings.php><img id="dymImg3" class="cornerimage3" src="./images/random3.php"/>
<a href=hatchlings.php><img id="dymImg4" class="cornerimage4" src="./images/random4.php"/>
<a href=hatchlings.php><img id="dymImg5" class="cornerimage5" src="./images/random5.php"/>
<a href=hatchlings.php><img id="dymImg6" class="cornerimage6" src="./images/random6.php"/>
<a href=hatchlings.php><img id="dymImg7" class="cornerimage7" src="./images/random7.php"/>
<a href=hatchlings.php><img id="dymImg8" class="cornerimage8" src="./images/random8.php"/>
<a href=hatchlings.php><img id="dymImg9" class="cornerimage9" src="./images/random9.php"/>

</div>

 

PHP Page

 

$settings['img_folder'] = './adoptables/';


$settings['img_ext'] = array('.jpg','.gif','.png');

/*
   How to display the images?
   0 = print just the image path (for includes), like: images/test.jpg
   1 = redirect to the image, when using: <img src="randim.php" />
*/
$settings['display_type'] = 1;

/* Allow on-the-fly settings override? 0 = NO, 1 = YES */
$settings['allow_otf'] = 1;



/* Override type? */
if ($settings['allow_otf'] && isset($_GET['type']))
{
$type = intval($_GET['type']);
}
else
{
$type = $settings['display_type'];
}

/* Override images folder? */
if ($settings['allow_otf'] && isset($_GET['folder']))
{
$folder = htmlspecialchars(trim($_GET['folder']));
    if (!is_dir($folder))
    {
    	$folder = $settings['img_folder'];
    }
}
else
{
$folder = $settings['img_folder'];
}

/* Make sure images fodler ends with an '/' */
if (substr($folder,-1) != '/')
{
$folder.='/';
}

/* Get a list of all the image files */
$flist = array();
foreach($settings['img_ext'] as $ext)
{
    $tmp = glob($folder.'*'.$ext);
    if (is_array($tmp))
    {
    	$flist = array_merge($flist,$tmp);
    }
}

/* If we have any images choose a random one, otherwise select the "noimg.gif" image */
if (count($flist))
{
$src = $flist[array_rand($flist)];
}
else
{
$src = 'noimg.gif';
}

/* Output the image according to the selected type */
if ($type)
{
header('Location:'.$src);
    exit();
}
else
{
echo $src;
}
?>

[flexxall]

I currently have gotten the page listed on a server.

Heres the address if this helps any

http://midnighthatchlings.com