Question

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

Answer 1

您也可以使用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>

Answer 2

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

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

2 个答案: