Greetings, I would appreciate any help someone could give.

I'm using the following code to dynamically generate an image map, and have been trying to add a javascript function to show an enlarged preview image when each area is moused over. The php part of the code does what it's supposed to, but in the javascript I can't figure out how to get the corresponding image to display for each area.

Where I seem to be getting stuck is finding the right values to define the javascript variable preview (in bold). Is it possible to pull those values from php, or is there a better way to do this? Anything I've tried either returns ""Array" or "undefined".

Thanks

Code:
<?php
$filePath ='gallery/';
$imgPath = 'gallery/images/';

function getFiles($path) {
  if ($dir = opendir($path)) {
    while (false !== ($file = readdir($dir))) {
        if ($file != '.' && $file != '..') {
            $files[] = $file;
        }
    }
    closedir($dir);
  }
  return $files;
}

function mapAreas($path,$files) {
  $size = '20';
  $horz_limit = '25';
  $left = '0';
  $top = '0';
  $right = $size;
  $bottom = $size;
  foreach($files as $file) {
    $alt = ucwords(str_replace(array('.php','-','_'), array('',' ',' '), $file));
    $area .= "<area shape=\"rect\" coords=\"{$left},{$top},{$right},{$bottom}\" href=\"{$path}{$file}\" alt=\"{$alt}\">\n";
  $left = $left + $size;
  $right = $right + $size;
  if($left == $horz_limit * $size) {
    $left = '0';
    $top = $top + $size;
    $right = $size;
    $bottom = $bottom + $size;
    }
  }
  return $area;
}

$pages = getFiles($filePath);
$images = getFiles($imgPath);
$area = mapAreas($filePath,$pages);
?>

<script type="text/javascript">
function previewImg() {
  var area = document.getElementById('map').getElementsByTagName('area');
  for(i = 0; i < area.length; i++) {
    var preview = "<a href=\"????\"><img src=\"????\" width=\"50\" height=\"50\" alt="????"></a>";
    area[i].onmouseover = function() {
      document.getElementById('preview').innerHTML = preview;
    }
    area[i].onmouseout = function() {
      document.getElementById('preview').innerHTML = '';
    }
  }
}
window.onload = previewImg;
</script>