Mouseover with auto-generating gallery

[B1GC4T]

Hello,

I am making a website that uses html, CSS, Javascript, and PHP that scans a certain folder and automatically creates a grid of thumbnails and there corresponding links. So, I have a folder called 'images' and i put my sitepages and their thumbnails in that folder. The thumbnails are named the same as their matched html page with the addition of '-thumb.gif' at the end of the name. The PHP scans the directory looking for any file with 'thumb.gif' and removes that and changes the extension to .html while creating a hyperlink between the two matching files.

I hope I haven't confused anyone.

What I want to do is have a mouseover image change on the thumbnails while keeping the hyperlinks to the corresponding html pages. Below is the PHP that scans and creates the grid of thumbnails and the hyperlinks:

<?php

/* settings */
$image_dir = 'images/';
$per_column = 3;


/* step one: read directory, make array of files */
if ($handle = opendir($image_dir)) {
while (false !== ($file = readdir($handle)))
{
if ($file != '.' && $file != '..')
{
if(strstr($file,'-thumb'))
{
$files[] = $file;
}
}
}
closedir($handle);
}

/* step two: loop through, format gallery */
if(count($files))
{
foreach($files as $file)
{
$count++;
echo '<a class="photo-link" rel="one-big-group" href="',$image_dir,str_replace('-thumb.gif','.htm',$file),'"><img src="',$image_dir,$file,'" width="200" height="200"/></a>';

if($count % $per_column == 0) { echo '<div class="clear"></div>'; }
}
}
else
{
echo '<p>There are no images in this gallery.</p>';
}


?>

Any and all help is greatly appreciated as I am not very familiar with PHP or Javascript. Thanks much!!

P.S. the css and php files are attached.

[B1GC4T]

Any one have any ideas? Did I confuse anyone with my description? Any and all help is greatly appreciated.

Seth