html - 在新 div 中打开的缩略图（不是灯箱）

Question

我在上面有一个矩形，下面有一组缩略图。我需要编写代码，以便当我单击缩略图时，图像会放大以在上部矩形空间中打开（不使用 Lightbox）。如何将图像限制在上矩形？有没有办法将目标指定为那个盒子？还是您使用 iframe？如果是这样，iframe 是如何工作的？

Answer 1

请参阅可能解决您的问题的链接。http://html5box.com/html5gallery/index.php

Answer 2

你也可以使用 JavaScript
希望这会有所帮助

<script language="JavaScript">
function f(imageSource){
     document.getElementById("enlargedImage").src=imageSource;
}
</script>

<table width="585" height="482" border="0" align="center" cellpadding="0" cellspacing="50" bgcolor="#000000">
<tr><td bgcolor="#FFFFFF" align="center" width="600" height="326">
<img src="images/gallery/img1.jpg" name="enlargedImage" id="enlargedImage" width="492" height="287" /></td></tr>

<tr><td bgcolor="#FFFFFF" align="center" colspan="2">

<img src="images/gallery/img1.jpg" name="d" id="d" onmouseover="f('images/gallery/img1.jpg')" width="70" height="50" />
<img src="images/gallery/img2.jpg" name="d" id="d2" onmouseover="f('images/gallery/img2.jpg')" width="70" height="50" />
<img src="images/gallery/img3.jpg" name="d" id="d2" onmouseover="f('images/gallery/img3.jpg')" width="70" height="50" />
<img src="images/gallery/img4.jpg" name="d" id="d2" onmouseover="f('images/gallery/img4.jpg')" width="70" height="50" />
<img src="images/gallery/img5.jpg" name="d" id="d2" onmouseover="f('images/gallery/img5.jpg')" width="70" height="50" />
<img src="images/gallery/img6.jpg" name="d" id="d2" onmouseover="f('images/gallery/img6.jpg')" width="70" height="50" />

</td>
</tr>
</table>