이미지파일 롤오버시 자연스러운 이미지 체인지??? 정보
이미지파일 롤오버시 자연스러운 이미지 체인지???관련링크
본문
안녕하세요! ^^
궁금한게 있어서요. 고수님들에 도움을 받으려고 이렇게 글을 올립니다..
여기 처럼 롤오버시 자연스럽게 이미지 체인지 하고 싶은데..
어떻게 해야죠?
---------------------------------------------------------------------------------------------
저 같은경우는 롤오버 하면 딱딱 끊어지거든요..
제 이미지 출력 소스 입니다.
----------------------------------------------------------------------------------------------
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="520" valign="top" align="center"> <table border="0" cellspacing="0" cellpadding="5" bgcolor="#AAAAAA">
<tr>
<td valign="top" align="center" bgcolor="#FFFFFF">
<? if ($view[file][1][view]) {?>
<?
for ($i=0; $i<=10; $i++) {
$image[$i] = "$g4[path]/data/file/$bo_table/".$view[file][$i][file];
}
?>
<? if ($view[file][1][view]) {?>
<a href=#1 <? echo "onClick=\"chgImg( '".$image[1]."','".$image[1]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[1]?>" name=gallery_img width="500" border=0 value=0> </A>
<? } else {?>
<img src="<?=$board_skin_path?>/img/noimg.gif" border=0 value=0>
<? } ?>
</td>
</tr>
</table></td>
</tr>
<tr>
<td> <br>
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90">
<?=$view[file][1][content]?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[1]."','".$image[1]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[1]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][2][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[2]."','".$image[2]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[2]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][3][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[3]."','".$image[3]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[3]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][4][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[4]."','".$image[4]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[4]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][5][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[5]."','".$image[5]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[5]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][6][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[6]."','".$image[6]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[6]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][7][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[7]."','".$image[7]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[7]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
</tr>
</table>
<?//echo $view[rich_content]; // 과 같은 코드를 사용할 경우?>
<!-- 테러 태그 방지용 -->
<a href=""></a><a href=''></a><br>
<span class="ct lh"> </span></td>
</tr>
<tr>
<td><span class="ct lh">
<?=$view[content];?>
</span></td>
</tr>
</table>
<? if ($is_signature) { echo "<br>$signature<br><br>"; } // 서명 출력 ?>
</td>
</tr>
</table><br>
<tr>
<td width="520" valign="top" align="center"> <table border="0" cellspacing="0" cellpadding="5" bgcolor="#AAAAAA">
<tr>
<td valign="top" align="center" bgcolor="#FFFFFF">
<? if ($view[file][1][view]) {?>
<?
for ($i=0; $i<=10; $i++) {
$image[$i] = "$g4[path]/data/file/$bo_table/".$view[file][$i][file];
}
?>
<? if ($view[file][1][view]) {?>
<a href=#1 <? echo "onClick=\"chgImg( '".$image[1]."','".$image[1]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[1]?>" name=gallery_img width="500" border=0 value=0> </A>
<? } else {?>
<img src="<?=$board_skin_path?>/img/noimg.gif" border=0 value=0>
<? } ?>
</td>
</tr>
</table></td>
</tr>
<tr>
<td> <br>
<table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90">
<?=$view[file][1][content]?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[1]."','".$image[1]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[1]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][2][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[2]."','".$image[2]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[2]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][3][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[3]."','".$image[3]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[3]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][4][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[4]."','".$image[4]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[4]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][5][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[5]."','".$image[5]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[5]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][6][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[6]."','".$image[6]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[6]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
<td width="90">
<? if ($view[file][7][file]) {?>
<a href=#1 <? echo "onMouseOver=\"chgImg( '".$image[7]."','".$image[7]."','".ereg_replace("(\r\n|\n|\r)", "<br>", strip_tags($content) )."' );\"" ?>>
<img src="<?=$image[7]?>" width="80" height="90" align="absmiddle" border="1"></a>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="4"></td>
</tr>
</table>
<? }?>
</td>
</tr>
</table>
<?//echo $view[rich_content]; // 과 같은 코드를 사용할 경우?>
<!-- 테러 태그 방지용 -->
<a href=""></a><a href=''></a><br>
<span class="ct lh"> </span></td>
</tr>
<tr>
<td><span class="ct lh">
<?=$view[content];?>
</span></td>
</tr>
</table>
<? if ($is_signature) { echo "<br>$signature<br><br>"; } // 서명 출력 ?>
</td>
</tr>
</table><br>
<?
include_once("./view_comment.php");
?>
include_once("./view_comment.php");
?>
<?=$link_buttons?>
</td></tr></table><br>
<script language="JavaScript">
// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function resize_image()
{
var target = document.getElementsByName('target_resize_image[]');
var image_width = parseInt('<?=$board[bo_image_width]?>');
var image_height = 0;
// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function resize_image()
{
var target = document.getElementsByName('target_resize_image[]');
var image_width = parseInt('<?=$board[bo_image_width]?>');
var image_height = 0;
for(i=0; i<target.length; i++) {
// 원래 사이즈를 저장해 놓는다
target[i].tmp_width = target[i].width;
target[i].tmp_height = target[i].height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > image_width) {
image_height = parseFloat(target[i].width / target[i].height)
target[i].width = image_width;
target[i].height = parseInt(image_width / image_height);
}
}
}
// 원래 사이즈를 저장해 놓는다
target[i].tmp_width = target[i].width;
target[i].tmp_height = target[i].height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > image_width) {
image_height = parseFloat(target[i].width / target[i].height)
target[i].width = image_width;
target[i].height = parseInt(image_width / image_height);
}
}
}
window.onload = resize_image;
</script>
</script>
댓글 전체
제가 보기에는,
끊어지게 보이는 것은 마우스오버 이벤트때 보여지는 롤오버이미지를 프리로드하지 않아서 그렇게 보이는 것입니다.
마우스오버 이벤트가 발생한 이후에 웹브라우저가 서버에서 이미지를 가져오게되고,
그 시간때문에 끊어져보이는 것입니다.
롤오버 이미지를 프리로드하세요. 즉.웹브라우저로 하여금 이벤트 발생이전 미리 이미지를 가져오게 하는 것입니다.
이미지를 프리로드 하는 방법은 님이 올리신 참조사이트 소스에 나와있습니다.
자바스크립트에 MM_preloadImages 함수가 있네요. 저건 드림위버에서 만든 함수인데
저걸 잘 보시면 됩니다.
끊어지게 보이는 것은 마우스오버 이벤트때 보여지는 롤오버이미지를 프리로드하지 않아서 그렇게 보이는 것입니다.
마우스오버 이벤트가 발생한 이후에 웹브라우저가 서버에서 이미지를 가져오게되고,
그 시간때문에 끊어져보이는 것입니다.
롤오버 이미지를 프리로드하세요. 즉.웹브라우저로 하여금 이벤트 발생이전 미리 이미지를 가져오게 하는 것입니다.
이미지를 프리로드 하는 방법은 님이 올리신 참조사이트 소스에 나와있습니다.
자바스크립트에 MM_preloadImages 함수가 있네요. 저건 드림위버에서 만든 함수인데
저걸 잘 보시면 됩니다.