새 div에서 썸네일이 열립니다 (라이트 박스가 아님)

Question

상단에 사각형이 있고 아래에 미리보기가 있습니다. 미리보기 이미지를 클릭하면 이미지가 확대되어 라이트 박스를 사용하지 않고 상단 사각형 공간에서 열도록 코드를 작성해야합니다. 이미지를 그 위의 사각형으로 어떻게 제한합니까? 목표를 그 상자로 지정하는 방법이 있습니까? 아니면 iframe을 사용합니까? 그렇다면 iframe은 어떻게 작동합니까?

Answer 1

또한 자바 스크립트
희망을 사용할 수있는이

<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