PDA

View Full Version : Help with previews on image map, please



billyboy
10-09-2007, 03:28 PM
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


<?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>