묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
onMouseOver
2003.02.03 14:04
안녕하세요.
마우스 오버되었을때와 아웃되었을때 같은 이미지를 적용시키고 싶거든요.
즉 마우스 오버되었을때 바뀐 이미지가 아웃되었을때도 그대로 유지되도록 하려구요.
그런데 마우스를 오버 했을때는 잘 바뀌는데, 마우스가 아웃되면 오버된 이미지가 유지가 안되고 이전의 이미지로 되돌아가네요.
별로 어렵진 않는것 같은데 왜 안되는지 모르겠어요.
제 말이어렵죠? 밑에 사이트 보시면 금방 아실수 있으실꺼에요...
http://www.neverend.pe.kr
그리고 제가 구현하려고 했던 소스는 밑에 있습니다.
소스중 뭐가 잘못된 건지 좀 알려주세요...
고수님들 꼭좀 부탁드립니다.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</HEAD>
<body onLoad="MM_preloadImages('images/sub1_shop.gif','images/sub2_shop.gif','images/sub3_shop.gif','images/sub4_shop.gif','images/sub5_shop.gif');" leftmargin="0" topmargin="0">
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=3>
<a href="#"><img src="images/main_logo.gif" width="173" height="74" border="0"></a></TD>
<TD COLSPAN=7>
<IMG SRC="images/top_new_02.gif" WIDTH=587 HEIGHT=29 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/top_new_03.gif" WIDTH=66 HEIGHT=45 ALT=""></TD>
<TD>
<a href="./mart5/index.php3" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1', ''+ '+ ', 'images/sub1_shop-over.gif', 1)"><img name="Image1" src="images/sub1_shop.gif" width="103" height="28" border="0" alt="청첩장쇼핑" ></a></TD>
<TD>
<a href="include.php3?inc=sub_insa" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2', '', 'images/sub2_insa-over.gif', 1)"><img name="Image2" src="images/sub2_insa.gif" width="97" height="28" border="0" alt="인사말보기" ></a></TD>
<TD>
<a href="include.php3?inc=sub_mypage" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3'+ ', '', 'images/sub3_mypage-over.gif', 1)"><img name="Image3" src="images/sub3_mypage.gif" width="87" height="28" border="0" alt="주문확인 및 나만의 공간" ></a></TD>
<TD>
<a href="include.php3?inc=sub_support" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4', '', 'images/sub4_support-over.gif',1)"><img name="Image4" src="images/sub4_support.gif" width="89" height="28" border="0" alt="초안확인 및 질문게시판" ></a></TD>
<TD>
<a href="include.php3?inc=sub_guide" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5', '', 'images/sub5_guide-over.gif', 1)"><img name="Image5" src="images/sub5_guide.gif" width="82" height="28" border="0" alt="주문방법 및 배송안내" ></a></TD>
<TD ROWSPAN=2>
<IMG SRC="images/top_new_09.gif" WIDTH=63 HEIGHT=45 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="images/top_new_10.gif" WIDTH=458 HEIGHT=17 ALT=""></TD>
</TR>
</TABLE>
</BODY>
</HTML>
마우스 오버되었을때와 아웃되었을때 같은 이미지를 적용시키고 싶거든요.
즉 마우스 오버되었을때 바뀐 이미지가 아웃되었을때도 그대로 유지되도록 하려구요.
그런데 마우스를 오버 했을때는 잘 바뀌는데, 마우스가 아웃되면 오버된 이미지가 유지가 안되고 이전의 이미지로 되돌아가네요.
별로 어렵진 않는것 같은데 왜 안되는지 모르겠어요.
제 말이어렵죠? 밑에 사이트 보시면 금방 아실수 있으실꺼에요...
http://www.neverend.pe.kr
그리고 제가 구현하려고 했던 소스는 밑에 있습니다.
소스중 뭐가 잘못된 건지 좀 알려주세요...
고수님들 꼭좀 부탁드립니다.
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</HEAD>
<body onLoad="MM_preloadImages('images/sub1_shop.gif','images/sub2_shop.gif','images/sub3_shop.gif','images/sub4_shop.gif','images/sub5_shop.gif');" leftmargin="0" topmargin="0">
<TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=3>
<a href="#"><img src="images/main_logo.gif" width="173" height="74" border="0"></a></TD>
<TD COLSPAN=7>
<IMG SRC="images/top_new_02.gif" WIDTH=587 HEIGHT=29 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/top_new_03.gif" WIDTH=66 HEIGHT=45 ALT=""></TD>
<TD>
<a href="./mart5/index.php3" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1', ''+ '+ ', 'images/sub1_shop-over.gif', 1)"><img name="Image1" src="images/sub1_shop.gif" width="103" height="28" border="0" alt="청첩장쇼핑" ></a></TD>
<TD>
<a href="include.php3?inc=sub_insa" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2', '', 'images/sub2_insa-over.gif', 1)"><img name="Image2" src="images/sub2_insa.gif" width="97" height="28" border="0" alt="인사말보기" ></a></TD>
<TD>
<a href="include.php3?inc=sub_mypage" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3'+ ', '', 'images/sub3_mypage-over.gif', 1)"><img name="Image3" src="images/sub3_mypage.gif" width="87" height="28" border="0" alt="주문확인 및 나만의 공간" ></a></TD>
<TD>
<a href="include.php3?inc=sub_support" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4', '', 'images/sub4_support-over.gif',1)"><img name="Image4" src="images/sub4_support.gif" width="89" height="28" border="0" alt="초안확인 및 질문게시판" ></a></TD>
<TD>
<a href="include.php3?inc=sub_guide" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5', '', 'images/sub5_guide-over.gif', 1)"><img name="Image5" src="images/sub5_guide.gif" width="82" height="28" border="0" alt="주문방법 및 배송안내" ></a></TD>
<TD ROWSPAN=2>
<IMG SRC="images/top_new_09.gif" WIDTH=63 HEIGHT=45 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=5>
<IMG SRC="images/top_new_10.gif" WIDTH=458 HEIGHT=17 ALT=""></TD>
</TR>
</TABLE>
</BODY>
</HTML>
댓글 2
-
TheMics
2003.02.03 16:15
-
세황이
2003.02.03 16:30
고맙습니다^^
그런데 그렇게 할경우 마우스가 다른메뉴로 마우스 오버되었을때 기존선택되었던 메뉴가 풀어집니다. 이걸 기존 선택된 select 된 값이 풀리지 않고 또다른 메뉴로 오버될 수 있도록 할수는 없는건가요? 여기 사이트는 그렇게 되던데요..
http://www.neverend.pe.kr
제가 하려던 것은 이거 였거든요...
스크립트에서
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
는 지우고 싶으면 지우시구요^^;