2026, 새로운 도약을 시작합니다.

이미지 팝업창 채택완료

지수아빠 님의 맛집

https://sir.kr/g5_skin/32431

에 있는 이미지 박스를 이용하여 아래와 같이 이미지를 표시합니다.

아래쪽의 썸네일은 onmouseover로 위쪽에 resize된 원본이미지가 표시됩니다.

그런데, 이 resize된 원본이미지를 onclick 했을 때 팝업창으로 원본 이미지가 나타나게 하고 싶은데,

방법을 좀 알려 주세요.

3542522442_1635715629.1721.png

이 부분의 코드는 아래와 같습니다.

Copy

답변 2개

채택된 답변
+20 포인트

onmouseout 관련을 지우시고 onmouseover를 onclick으로 바꾸세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

이렇게 바꾸어 보았습니다만, 이미지 팝업창이 뜨질 않네요.

<table class="viewtable" cellpadding="0" cellspacing="0">
<tr>
<td class="b_box">
<?php
// 파일 출력
$sql = "select * from {$g5['board_file_table']} where `bo_table`='$bo_table' and `wr_id`='$wr_id'";
$result=sql_query($sql);

for($i=0 ; $row = sql_fetch_array($result) ; $i++){
if($i > 0){
$style= "style=\"display:none\"";
}

$imgpath = $view['file'][$i]['path'];
$imgfile = $view['file'][$i]['file'];
$imgsrc = $imgpath.'/'.$imgfile;
$imgopen = "window.open('$imgsrc', '_blank', 'width=400, height=600, menubar=no, status=no, toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500')";
echo "<a href='javascript:void(0);' onclick='$imgopen'>";
echo "<img src='$imgsrc' border=0 id=img$i $style>";
echo "</a>";
$thumimg[$i]="<img src ={$view['file'][$i]['path']}/{$view['file'][$i]['file']} border=0 id=ThumbImage$i onfocus=\"javascript:ThumbViewer(this)\" onmouseover=\"javascript:ThumbViewer(this)\">";//{}''추가!!!
}
?>
</td>
</tr>
<tr>
<td height="10" style="padding-left:10px;">
<div id="text1"></div>
</td>
</tr>
<tr>
<td>
<table cellpadding=0 cellspacing=2 border=0>
<tr>
<?php
for ($i=0; $i<=9; $i++) {
$content2[$i]=nl2br($view['file'][$i]['content']); // 파일내용 보이게 ,엔터키
}
?>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[0]?>')"><?=$thumimg[0]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[1]?>')"><?=$thumimg[1]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[2]?>')"><?=$thumimg[2]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[3]?>')"><?=$thumimg[3]?></a></td>
<td width="20%" class="s_box"><a href="#" onclick="javascript:change('<?=$content2[4]?>')"><?=$thumimg[4]?></a></td>
</tr>
<tr>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[5]?>')"><?=$thumimg[5]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[6]?>')"><?=$thumimg[6]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[7]?>')"><?=$thumimg[7]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[8]?>')"><?=$thumimg[8]?></a></td>
<td class="s_box"><a href="#" onclick="javascript:change('<?=$content2[9]?>')"><?=$thumimg[9]?></a></td>
</tr>
</table>
</td>
</tr>
</table>
<a href="javascript:change('<?=$content2[8]?>')">

이렇게 해보세요
<a href="javascript:change('<?=$content2[8]?>')">
로 바꿔봐도 안되네요.

댓글을 작성하려면 로그인이 필요합니다.

이미지 주소를 팝업창으로 띄어주시면 원본이미지 확인이 가능합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고