작은이미지 마우스 오버시 큰 이미지 안바뀌는 문제 정보
작은이미지 마우스 오버시 큰 이미지 안바뀌는 문제본문
안녕하세요
작은 이미지에 마우스 오버시 큰 이미지가 변경이 되게끔 스크립트를 아래와 같이 적용했습니다.
그런데 작은 이미지 마우스 오버시 큰이미지가 바뀌지 않습니다.
작은이미지 출력코드 (사노라가노라님의 조언으로 변수변경)
/----------------------------------------------------------------------------------------------
<?
// 파일 출력
$first_img = "";
for( $j=0 ; $j < 5 ; $j++ )
{ // j 로 변경 ★
$wr_id = $list[$i][wr_id]; // ★ 리스트 wr_id - 파일 테이블 wr_id 처리 위한 - 다른 곳에 영향 주면 $wr_id 변수 변경 이용
$row = sql_fetch( "select * from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' and bf_no = '$j' " );
$img[$j] = "$g4[path]/data/file/$bo_table/$row[bf_file]";
if ( $first_img == "" && $row[bf_file] )
$first_img = $img[$j];
if ( ! $row[bf_file] )
$img[$j] = $board_skin_path."/img/empty.gif";
}
?>
-----------------------------------------------------------------------------------------------/
<script language="JavaScript">
<!--
function transimg(place) {
if (place==1) dare.src="<?=$img[0]?>";
if (place==2) dare.src="<?=$img[1]?>";
if (place==3) dare.src="<?=$img[2]?>";
if (place==4) dare.src="<?=$img[3]?>";
if (place==5) dare.src="<?=$img[4]?>";
}
// -->
</script>
큰 이미지 출력부분
/-----------------------------------------------------------------------------------------------
<?
if ($mw_basic[cf_type] == "desc" && file_exists($thumb_file)) {
echo "
<table width='1000' border='0' align='center' cellpadding='0' cellspacing='0' style='margin-bottom:40px;'>
<tr>
<td height='76' colspan='4' valign='top'>
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td height='5' colspan='3' align='left'><div id='loc_mark' style='position:absolute;'><Img src='{$board_skin_path}/img/S01_KN01_mark.png'></div></td>
</tr>";
echo "<td width='650'>";
echo "<div class=mw_basic_list_thumb>";
echo "<a href=\"{$list[$i][href]}\"><img src=\"{$thumb_file}\" width={$mw_basic[cf_thumb_width]} height={$mw_basic[cf_thumb_height]} align=absmiddle alt='$desc' name=dare></a>";
echo "</div>";
echo "</td>";
}
...이하 생략
?>
-----------------------------------------------------------------------------------------------/
작은이미지 출력부분
/----------------------------------------------------------------------------------------------
<tr>
<td height='50' align='left' style='padding-left:10px;' style='cursor: pointer;'>
<img src='<?=$img[0]?>' width='50' height='50' border='0' onmouseover='transimg(1)'>
<img src='<?=$img[1]?>' width='50' height='50' border='0' onmouseover='transimg(2)'>
<img src='<?=$img[2]?>' width='50' height='50' border='0' onmouseover='transimg(3)'>
<img src='<?=$img[3]?>' width='50' height='50' border='0' onmouseover='transimg(4)'>
<img src='<?=$img[4]?>' width='50' height='50' border='0' onmouseover='transimg(5)'>
</td>
</tr>
</table>
</td>
-----------------------------------------------------------------------------------------------/
여기서 큰이미지에 name=dare 정의 후 작은 이미지에 onmouseover='transimg(1)' 적용했는데
아무런 변화가 없습니다.
고수님들의 도움 부탁드립니다.
즐거운 하루 되세요
작은 이미지에 마우스 오버시 큰 이미지가 변경이 되게끔 스크립트를 아래와 같이 적용했습니다.
그런데 작은 이미지 마우스 오버시 큰이미지가 바뀌지 않습니다.
작은이미지 출력코드 (사노라가노라님의 조언으로 변수변경)
/----------------------------------------------------------------------------------------------
<?
// 파일 출력
$first_img = "";
for( $j=0 ; $j < 5 ; $j++ )
{ // j 로 변경 ★
$wr_id = $list[$i][wr_id]; // ★ 리스트 wr_id - 파일 테이블 wr_id 처리 위한 - 다른 곳에 영향 주면 $wr_id 변수 변경 이용
$row = sql_fetch( "select * from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' and bf_no = '$j' " );
$img[$j] = "$g4[path]/data/file/$bo_table/$row[bf_file]";
if ( $first_img == "" && $row[bf_file] )
$first_img = $img[$j];
if ( ! $row[bf_file] )
$img[$j] = $board_skin_path."/img/empty.gif";
}
?>
-----------------------------------------------------------------------------------------------/
<script language="JavaScript">
<!--
function transimg(place) {
if (place==1) dare.src="<?=$img[0]?>";
if (place==2) dare.src="<?=$img[1]?>";
if (place==3) dare.src="<?=$img[2]?>";
if (place==4) dare.src="<?=$img[3]?>";
if (place==5) dare.src="<?=$img[4]?>";
}
// -->
</script>
큰 이미지 출력부분
/-----------------------------------------------------------------------------------------------
<?
if ($mw_basic[cf_type] == "desc" && file_exists($thumb_file)) {
echo "
<table width='1000' border='0' align='center' cellpadding='0' cellspacing='0' style='margin-bottom:40px;'>
<tr>
<td height='76' colspan='4' valign='top'>
<table width='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td height='5' colspan='3' align='left'><div id='loc_mark' style='position:absolute;'><Img src='{$board_skin_path}/img/S01_KN01_mark.png'></div></td>
</tr>";
echo "<td width='650'>";
echo "<div class=mw_basic_list_thumb>";
echo "<a href=\"{$list[$i][href]}\"><img src=\"{$thumb_file}\" width={$mw_basic[cf_thumb_width]} height={$mw_basic[cf_thumb_height]} align=absmiddle alt='$desc' name=dare></a>";
echo "</div>";
echo "</td>";
}
...이하 생략
?>
-----------------------------------------------------------------------------------------------/
작은이미지 출력부분
/----------------------------------------------------------------------------------------------
<tr>
<td height='50' align='left' style='padding-left:10px;' style='cursor: pointer;'>
<img src='<?=$img[0]?>' width='50' height='50' border='0' onmouseover='transimg(1)'>
<img src='<?=$img[1]?>' width='50' height='50' border='0' onmouseover='transimg(2)'>
<img src='<?=$img[2]?>' width='50' height='50' border='0' onmouseover='transimg(3)'>
<img src='<?=$img[3]?>' width='50' height='50' border='0' onmouseover='transimg(4)'>
<img src='<?=$img[4]?>' width='50' height='50' border='0' onmouseover='transimg(5)'>
</td>
</tr>
</table>
</td>
-----------------------------------------------------------------------------------------------/
여기서 큰이미지에 name=dare 정의 후 작은 이미지에 onmouseover='transimg(1)' 적용했는데
아무런 변화가 없습니다.
고수님들의 도움 부탁드립니다.
즐거운 하루 되세요
댓글 전체

dare.src 만 하면 스크립트안에서 dare가 어떤객체인지 못찾습니다
name=dare id=dare 까지 정의후
document.getElementById('dare').src 로 해보세요
name=dare id=dare 까지 정의후
document.getElementById('dare').src 로 해보세요
안녕하세요..
알려주신대로 위 처럼 적용후 <script language="JavaScript">//document.getElementById('dare').src;</script> 스크립트를 적용했는데 해결이 되지 않네요..
좀더 구체적으로 알려주실 수 있으신가요?
알려주신대로 위 처럼 적용후 <script language="JavaScript">//document.getElementById('dare').src;</script> 스크립트를 적용했는데 해결이 되지 않네요..
좀더 구체적으로 알려주실 수 있으신가요?

아래처럼 수정해보세요
if (place==1) dare.src="<?=$img[0]?>";
를
if (place==1) document.getElementById('dare').src="<?=$img[0]?>";
나머지도 마찬가지구요~
if (place==1) dare.src="<?=$img[0]?>";
를
if (place==1) document.getElementById('dare').src="<?=$img[0]?>";
나머지도 마찬가지구요~
위처럼 적용하니 이미지가 전부 같은 이미지로 출력이 되어버리네요..ㅠㅠ
게시물이 2개가 있을경우 두번째 게시물의 작은이미지에 마우스를 대면 첫번째 게시물의 큰이미지에서 두번째 게시믈의 큰이미지가 출력이 되는 현상이 일어나는군요
게시물이 2개가 있을경우 두번째 게시물의 작은이미지에 마우스를 대면 첫번째 게시물의 큰이미지에서 두번째 게시믈의 큰이미지가 출력이 되는 현상이 일어나는군요

두개면 name 과 id도 갯수에따라 구분되야겟죠 ^^
무슨얘기신지? 이해가 잘 안가네요?