html - 新しい div で開くサムネイル (ライトボックスではない)

Question

上に長方形があり、下に一連のサムネイルがあります。サムネイルをクリックすると、画像が拡大されて上部の長方形のスペースで開くようにコードを記述する必要があります (ライトボックスを使用しません)。画像をその上の長方形に限定するにはどうすればよいですか? ターゲットをそのボックスとして指定する方法はありますか? それとも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>