CSS onmouseover gallery with php loop - php

Question

I once created an image gallery using CSS which did the following:
Created a thumbnail gallery
Created a div where in there was placed 1x1 pixel images
on mouseover of thumbnails, these 1x1 pixel images expanded to fit the div size, with height being relative to length.
My code so far:
php:
echo '<div id="thumbnails">';
$files = glob("11-09-2012/*.*");
for ($i=1; $i<count($files); $i++)
{ //creating thumbnails
$num = $files[$i];
echo '<img src="'.$num.'" height="50px" id="thumb'.$files[$i].'"></img>';
};
echo '</div><div id="gallery">';
for ($i=1; $i<count($files); $i++)
{ //creating 1x1
$num = $files[$i];
echo '<img STYLE="position:absolute" src="'.$num.'" height="1px" width="1px" id="img'.$files[$i].'"></img>';
};
echo '</div>';
CSS:
#gallery {
margin: 0 auto;
border-style: solid;
border-width: 3px;
border-color: #fff;
width: 800px;
height: 600px;
}
Now I'm not sure where to go - Any help is appreciated - alternative ways to do this, is as well.
Best regards - Jesper

Answer 1

A naïve programmer might recommend jQuery, or attach an event to each individual image. Here's how the big boys do it:
(function() {
var box = document.getElementById('thumbnails'),
handler = function(e) {
e = e||window.event;
var tar = e.target || e.srcElement,
type = e.type, id = tar.id, m, img;
if( (m=id.match(/^thumb(.*)$/)) && (img=document.getElementById('img'+m[1]))) {
img.style.height = img.style.width = type == "mouseover" ? "auto" : "1px";
}
};
if( typeof box.attachEvent != "undefined") {
box.attachEvent('onmouseover',handler);
box.attachEvent('onmouseout',handler);
}
else {
box.addEventListener('mouseover',handler);
box.addEventListener('mouseout',handler);
}
})();
The only change you need to make to your HTML is to remove the width="1px" height="1px" from your images and instead add width:1px;height:1px;max-width:800px;max-height:600px; to the image's style. This would be better done in the CSS file:
#gallery>img {
position: absolute;
left: 0; top: 0;
width: 1px; height: 1px;
max-width: 800px;
max-height: 600px;
}

Answer 2

http://jsfiddle.net/yDUMT/
The jsfiddle shows the onMouseOver being used with a javascript function to enlarge the 1px when the thumbnail is mouse overed, and the onMouseOut being used with a javascript function to shrink the enlarged 1px image back down when the mouse is moved off the thumbnail.