작은이미지에 마우스 올리면 큰이미지가 바뀌고 내용도 나오게...

· 2010-08-15 (일) 17:58:09 · 1849 · 2
1111.jpg
이미지를 보시면 이해가 되실꺼예요...

왼쪽의 작은 그림에 마우스를 오리면 오른쪽의 큰그림이 바뀌는 갤러리형 소스입니다.
그런데 문제는 왼쪽의 작은 그림에 마우스 올리면 오른쪽 큰 그림 밑에 내용도 바뀌어야 하는데 이미지만 바뀌네요..

큰이미지에 대한 내용도 같이 바뀌게 하려면 소스를 어떻게 바꾸어야할지요...고수님의 가르침을 긷다리겠습니다.ㅠㅜ








이건 list.skin.php파일 부분입니다.



<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

//작은 이미지 사이즈
$small_width = "88";
$small_height = "63";
//큰이미지
$large_width = "369";
$large_height = "296";

// 선택옵션으로 인해 셀합치기가 가변적으로 변함
$colspan = 7;

// 제목이 두줄로 표시되는 경우 이 코드를 사용해 보세요.
// <nobr style='display:block; overflow:hidden; width:000px;'>제목</nobr>
?>
<!-- 게시판 목록 시작 -->
<style type="text/css">
#view01 {
position:absolute;
width:196px;
height:70px;
z-index:1;
left: 190px;
top: 570px;
}
#view02 {
position:absolute;
width:196px;
height:70px;
z-index:1;
left: 190px;
top: 980px;
}
</style>
<div id="view01"><img src="../img/viewtop.gif" width="196" height="70" /></div>
<div id="view02"><img src="../img/viewdown.gif" width="196" height="24" /></div>
<table width="<?=$width?>" align=center cellpadding=0 cellspacing=0>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td rowspan="2" valign="top">

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="14%" valign="top">
<table cellpadding="0" cellspacing="0" border=1 bordercolor="#ffffff">
<tr><td height="97"></td></tr>
<tr>
<!-- 목록 -->
<? for ($i=0; $i<count($list); $i++) {
echo "<td width='93' height='90' align='center' valign='top' >";
if(!$member[mb_id]) {
$list[$i][href] = "#";
}

$list_file = sql_fetch("select bf_file from $g4[board_file_table] where bo_table='$bo_table' and bf_no = '0' and wr_id='{$list[$i][wr_id]}'");
if($list_file[bf_file]) {
$list_file_view[$i] = "<img src='./../data/file/$bo_table/$list_file[bf_file]' style='cursor:pointer' border=0 width=$small_width height=$small_height onmouseover=\"document.getElementById('large').src='./../data/file/$bo_table/$list_file[bf_file]'; document.getElementById('view').href='{$list[$i][href]}'\">";
$list_lfile_view[$i] = "<table width='369' border='0' cellspacing='0' cellpadding='0'><tr><td height='296' valign='top'><a id=view href='#'><img id=large src='./../data/file/$bo_table/$list_file[bf_file]' border=0 width=$large_width height=$large_height></a><br></td></tr><tr><td height='56'><div align='right' class='11size'>{$list[$i][wr_content]}</div></td></tr></table>";
}else {
$list_file_view[$i] = "";
$list_lfile_view[$i] = "";
}

$latest_subject = cut_str($list[$i][subject], 12, '...'); // 제목

echo $list_file_view[$i];
echo "<br><span class='11size'>";
echo $latest_subject;
echo "</span></td>";

if($i%2) {
echo "</tr><tr>";
}

} ?>
</td>
</tr>
</table>
</td>

<? if (count($list) == 0) { echo "<td colspan='$colspan' height=50 align=center>게시물이 없습니다.</td>"; } ?>
</tr>

</table>

</td><td valign="top">

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><table width="590" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="<?=$board_skin_path?>/img/top01.gif" width="590" height="110"></td>
</tr>
<tr>
<td rowspan="2"><img src="<?=$board_skin_path?>/img/left01.gif" width="96" height="398"></td>
<td width="369" height="352" valign="top"><?=$list_lfile_view[0]?></td>
<td rowspan="2"><img src="<?=$board_skin_path?>/img/right01.gif" width="125" height="398"></td>
</tr>
<tr>
<td height="46"><img src="<?=$board_skin_path?>/img/down01.gif" width="369" height="46"></td>
</tr>
</table></td>
</tr>
</table>

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

<!-- 페이지 -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" height=30><? if ($prev_part_href) { echo "<a href='$prev_part_href'><img src='$board_skin_path/img/btn_search_prev.gif' border=0 align=absmiddle title='이전검색'></a>"; }

// 기본으로 넘어오는 페이지를 아래와 같이 변환하여 이미지로도 출력할 수 있습니다.
echo $write_pages;
$write_pages = str_replace("처음", "<img src='$board_skin_path/img/begin.gif' border='0' align='absmiddle' title='처음'>", $write_pages);
$write_pages = str_replace("이전", "<img src='$board_skin_path/img/prev.gif' border='0' align='absmiddle' title='이전'>", $write_pages);
$write_pages = str_replace("다음", "<img src='$board_skin_path/img/next.gif' border='0' align='absmiddle' title='다음'>", $write_pages);
$write_pages = str_replace("맨끝", "<img src='$board_skin_path/img/end.gif' border='0' align='absmiddle' title='맨끝'>", $write_pages);
$write_pages = preg_replace("/<span>([0-9]*)<\/span>/", "<b><font style=\"font-family:돋움; font-size:9pt; color:#797979\">$1</font></b>", $write_pages);
$write_pages = preg_replace("/<b>([0-9]*)<\/b>/", "<b><font style=\"font-family:돋움; font-size:9pt; color:orange;\">$1</font></b>", $write_pages);
if ($next_part_href) { echo "<a href='$next_part_href'><img src='$board_skin_path/img/btn_search_next.gif' border=0 align=absmiddle title='다음검색'></a>"; } ?>
</td>
</tr>
</table>

</td></tr>
</table>
<table width=<?=$width?> cellpadding=0 cellspacing=0 align=center>
<tr><td><img src="<?=$board_skin_path?>/img/007.jpg" width="688" height="370">
</td></tr>
</table>


<!-- 버튼 링크 -->
<form name=fsearch method=get style="margin:0px;">
<input type=hidden name=bo_table value="<?=$bo_table?>">
<input type=hidden name=sca value="<?=$sca?>">
<table width=<?=$width?> cellpadding=0 cellspacing=0 align=center>
<tr>
<td width="50%" height="40"><? if ($list_href) { ?>
<a href="<?=$list_href?>"><img src="<?=$board_skin_path?>/img/btn_list.gif" border="0"></a>
<? } ?>
<? if ($write_href) { ?>
<a href="<?=$write_href?>"><img src="<?=$board_skin_path?>/img/btn_write.gif" border="0"></a>
<? } ?>
<? if ($is_checkbox) { ?>
<a href="javascript:select_delete();"><img src="<?=$board_skin_path?>/img/btn_select_delete.gif" border="0"></a> <a href="javascript:select_copy('copy');"><img src="<?=$board_skin_path?>/img/btn_select_copy.gif" border="0"></a> <a href="javascript:select_copy('move');"><img src="<?=$board_skin_path?>/img/btn_select_move.gif" border="0"></a>
<? } ?>
</td>
<td width="50%" align="right"></td>
</tr>
</table>
</form>
</td>

</tr>

</table>

첨부파일

1111.jpg (308.3 KB)
0회 2010-08-15 17:58
gall.zip (344.9 KB) 14회 2010-08-15 17:58
|

댓글 2개

ㅠㅜ 답좀 주세용~
가장간단한 방법이라고 볼 수있는 것이
출력할 내용을 자바스크립트 배열로 만들어놓고 마우스 오버시 div에 출력하면 되는데
간단한 답변이 아니니 답변할 엄두를 못내겠군요

<script>
data=new Array();
<?
<? for ($i=0; $i<count($list); $i++)
echo "data[$i]={$list[$i][subject]};";
?>
</script>
위와 같이 자바스크립트 배열을 만들면 됩니다
댓글을 작성하시려면 로그인이 필요합니다.

그누4 질문답변

66,531건

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기 기존 게시물은 열람만 가능합니다.

+
제목 글쓴이 날짜 조회
10-08-16 조회 2,316
10-08-16 조회 1,674
10-08-16 조회 1,713
10-08-16 조회 1,739
10-08-16 조회 1,624
10-08-16 조회 1,865
10-08-16 조회 1,623
10-08-16 조회 1,732
10-08-16 조회 1,633
10-08-16 조회 1,622
10-08-15 조회 2,119
10-08-15 조회 1,323
10-08-15 조회 1,866
10-08-15 조회 1,850
10-08-15 조회 1,804
10-08-15 조회 1,705
10-08-15 조회 1,668
10-08-15 조회 2,004
10-08-14 조회 1,755
10-08-14 조회 4,949