작은이미지에 마우스 올리면 큰이미지가 바뀌고 내용도 나오게... 정보
작은이미지에 마우스 올리면 큰이미지가 바뀌고 내용도 나오게...첨부파일
본문
이미지를 보시면 이해가 되실꺼예요...
왼쪽의 작은 그림에 마우스를 오리면 오른쪽의 큰그림이 바뀌는 갤러리형 소스입니다.
그런데 문제는 왼쪽의 작은 그림에 마우스 올리면 오른쪽 큰 그림 밑에 내용도 바뀌어야 하는데 이미지만 바뀌네요..
큰이미지에 대한 내용도 같이 바뀌게 하려면 소스를 어떻게 바꾸어야할지요...고수님의 가르침을 긷다리겠습니다.ㅠㅜ
이건 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>
왼쪽의 작은 그림에 마우스를 오리면 오른쪽의 큰그림이 바뀌는 갤러리형 소스입니다.
그런데 문제는 왼쪽의 작은 그림에 마우스 올리면 오른쪽 큰 그림 밑에 내용도 바뀌어야 하는데 이미지만 바뀌네요..
큰이미지에 대한 내용도 같이 바뀌게 하려면 소스를 어떻게 바꾸어야할지요...고수님의 가르침을 긷다리겠습니다.ㅠㅜ
이건 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>
댓글 전체
ㅠㅜ 답좀 주세용~
가장간단한 방법이라고 볼 수있는 것이
출력할 내용을 자바스크립트 배열로 만들어놓고 마우스 오버시 div에 출력하면 되는데
간단한 답변이 아니니 답변할 엄두를 못내겠군요
<script>
data=new Array();
<?
<? for ($i=0; $i<count($list); $i++)
echo "data[$i]={$list[$i][subject]};";
?>
</script>
위와 같이 자바스크립트 배열을 만들면 됩니다
출력할 내용을 자바스크립트 배열로 만들어놓고 마우스 오버시 div에 출력하면 되는데
간단한 답변이 아니니 답변할 엄두를 못내겠군요
<script>
data=new Array();
<?
<? for ($i=0; $i<count($list); $i++)
echo "data[$i]={$list[$i][subject]};";
?>
</script>
위와 같이 자바스크립트 배열을 만들면 됩니다