php - 带有 php 循环的 CSS onmouseover 画廊

Question

我曾经使用 CSS 创建了一个图片库，它执行以下操作:

1. 创建了缩略图库
2. 创建了一个 div，其中放置了 1x1 像素的图像
3. 将鼠标悬停在缩略图上时，这些 1x1 像素的图像会展开以适应 div 大小，高度与长度相关。
4. 到目前为止我的代码:

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;  
}

现在我不确定该去哪里 - 欢迎任何帮助 - 也可以使用其他方法。

最好的问候 - Jesper

Answer 1

天真的程序员可能会推荐 jQuery，或将事件附加到每个单独的图像。以下是大男孩们的做法:

(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);
  }
})();

您需要对 HTML 进行的唯一更改是从图像中删除 width="1px"height="1px" 并添加 width:1px;height:1px ;max-width:800px;max-height:600px; 到图像的样式。这最好在 CSS 文件中完成:

#gallery>img {
    position: absolute;
    left: 0; top: 0;
    width: 1px; height: 1px;
    max-width: 800px;
    max-height: 600px;
}