묻고답하기
메뉴를 트랜지션효과를 적용해 만들었고, 메뉴에 마우스 오버시 서브메뉴가 나오게....
2006.06.23 23:27
메뉴를 트랜지션효과를 적용해 만들었고, 메뉴에 마우스 오버시 서브메뉴가 나오게 하려 했습니다...물론 서브메뉴는 레이어의 액션 기능을 이용했고요, 그런데... 계속 오류라고 나오네요...
아마도 한 문서에 2가지 스크립트가 있어서 그런거 같은데....
두가지 스크립트를 모두 사용할수 있는 방법이 없을까요?
인터넷에 나와있는 글을 읽어봤는데 이해하기 어려워 이렇게 글을 남깁니다...도와주세요...
아마도 한 문서에 2가지 스크립트가 있어서 그런거 같은데....
두가지 스크립트를 모두 사용할수 있는 방법이 없을까요?
인터넷에 나와있는 글을 읽어봤는데 이해하기 어려워 이렇게 글을 남깁니다...도와주세요...
댓글 3
-
ganji
2006.06.28 15:58
-
신종원
2006.06.27 21:13
<html>
<head>
<script language=javascript>
function bt(id,after)
{
eval(id+'.filters.blendTrans.stop();');
eval(id+'.filters.blendTrans.Apply();'+ '+ ');
eval(id+'.src="'+after+'";');
eval(id+'.filters.blendTrans.Play();');
}
// -->
</script>
<script language="JavaScript"><!--
function na_show_layer(lname)
{
if (na_show_layer.arguments.length <= 1) { // don't delete, backword compatibility
if(document.getElementById) {
document.getElementById(lname).style.visibility = 'visible';
} else if(document.layers) {
document.layers[lname].visibility = 'show'
} else if(document.all)
document.all(lname).style.visibility = 'visible'
} else {
if(document.getElementById) {
document.getElementById(lname).style.visibility = 'hidden';
} else if(document.layers) {
document.layers[lname].visibility = 'hide'
} else if(document.all)
document.all(lname).style.visibility = 'hidden'
}
}
// -->
</script></head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" onload="bt(); na_show_layer(lname);">
<table border="0" cellpadding="0" cellspacing="0" width="790" style="text-indent:0; margin:0;" align="center">
<tr>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href="#" onfocus='this.blur()' onMouseOver="bt("menu1","img/m1-1.png"); na_show_layer('layer1');" onMouseOut='bt("menu1","img/m1.png")'><img ID=menu1 src="img/m1.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()' onMouseOver='bt("menu2","img/m2-1.png")' onMouseOut='bt("menu2","img/m2.png")'><img ID=menu2 src="img/m2.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()' onMouseOver='bt("menu3","img/m3-1.png")' onMouseOut='bt("menu3","img/m3.png")'><img ID=menu3 src="img/m3.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="예비 교사들을 위한 강의 입니다...^^"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()' onMouseOver='bt("menu4","img/m4-1.png")' onMouseOut='bt("menu4","img/m4.png")'><img ID=menu4 src="img/m4.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="현직 교사를 위한 강의 입니다...^^"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()' onMouseOver='bt("menu5","img/m5-1.png")' onMouseOut='bt("menu5","img/m5.png")'><img ID=menu5 src="img/m5.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="과학영재 관련 강의 자료입니다....^^"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()'+ ' onMouseOver='bt("menu6","img/m6-1.png")' onMouseOut='bt("menu6","img/m6.png")'><img ID=menu6 src="img/m6.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="과학교육에 관한 연구자료입니다...^^"></a>
</p>
<td width="70" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()'+ ' onMouseOver='bt("menu7","img/m7-1.png")' onMouseOut='bt("menu7","img/m7.png")'><img ID=menu7 src="img/m7.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="제 연구실이에요....^^"></a>
</p>
<td width="55" height="90" valign="bottom">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><a href=main.htm onfocus='this.blur()' onMouseOver='bt("menu8","img/m8-1.png")' onMouseOut='bt("menu8","img/m8.png")'><img ID=menu8 src="img/m8.png" border=0 style="filter:blendTrans (duration=0.5)" width="70" height="90" alt="손님을 위한 방명록과 Q&A, 과학관련 사이트및 사진이랍니다...^^"></a>
</p>
<td width="245" height="100">
<p style="margin-right:0; margin-bottom:0; margin-left:0;"><img src="배너.png" width="230" height="90" border="0"></p>
</td>
</tr>
</table><div id="layer1" style="width:200px; height:75px; position:absolute; left:6px; top:94px; z-index:1; visibility:hidden;">
<p><img src="let5img.png" width="160" height="75" border="0"></p>
</div>
<p> </p>
</body>
</html>
소스는 다음과 같은데...계속 스크립트 오류가 납니다...어디가 문제인지 잘모르겠네요....
메뉴에 마우스가 올라가면 트랜지션되면서 하위 메뉴가 나와야 하는데....
계속 오류가 납니다.... 원래는 트랜지션이 되었는데...지금은 계속 스크립트 오류라고 나오네요.....겐지님....가르침을 좀 주세요.....ㅠ.ㅠ -
ganji
2006.06.25 08:32
소스라도 있다면 좀더 이해할수 있을텐데,,
이런식으로 사용해보세요.
; <- 이걸로 구분지어 보세요. 예를들어 아래와 같이요
onclick="document.getElementById('001').style.display='block';document.getElementById('002').style.display='none';
쪽지 잘 받았습니다.
일단 트랜지션 필터는 좀 소스를 줄였습니다. 단순 트랜지션인듯해서,,
자스는 링크가 아닌 이미지부분에 적용하셔야 합니다.
그리고 오버시 보여지는 레이어1은 일단 출력만 해 놓으신듯해서
저 또한 그렇게하고 소스만 정리했습니다.
이미지를 제 홈의 이미지로 테스트 하느라 좀 다를겁니다
원본 소스가 있으시니 이미지의 경로는 수정하시면 되겠구요.
아래부터 테스트한 소스입니다.
<html>
<head>
<STYLE type=text/css>
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
-->
</STYLE>
<SCRIPT type="text/javascript" language="JavaScript">
<!--
function chg_img ( obj, url )
{
obj.filters.blendTrans.apply();
obj.src = url;
obj.filters.blendTrans.play();
}
// -->
</SCRIPT>
<script language="JavaScript">
<!--
function na_show_layer(lname)
{
if (na_show_layer.arguments.length <= 1) { // don't delete, backword compatibility
if(document.getElementById) {
document.getElementById(lname).style.visibility = 'visible';
} else if(document.layers) {
document.layers[lname].visibility = 'show'
} else if(document.all)
document.all(lname).style.visibility = 'visible'
} else {
if(document.getElementById) {
document.getElementById(lname).style.visibility = 'hidden';
} else if(document.layers) {
document.layers[lname].visibility = 'hide'
} else if(document.all)
document.all(lname).style.visibility = 'hidden'
}
}
// -->
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="756" style="text-indent:0; margin:0;">
<tr>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif'); na_show_layer('layer1');" onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif');" border="0" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="예비 교사들을 위한 강의 입니다...^^" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'+ '+ 'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="현직 교사를 위한 강의 입니다...^^" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="과학영재 관련 강의 자료입니다....^^" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="과학교육에 관한 연구자료입니다...^^" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="제 연구실이에요....^^" /></a></td>
<td width="70" height="90" valign="bottom">
<a href="#" onfocus="this.blur()"><img src="http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif" style="filter:blendTrans(duration=0.3)" onMouseOver="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_on.gif')"onMouseOut="chg_img(this,'http://ganji.80port.net/bbs/skin/m7wow_study/tab_off.gif')" border="0" alt="손님을 위한 방명록과 Q&A, 과학관련 사이트및 사진이랍니다...^^" /></a></td>
<td width="245" height="100"><img src="배너.png" width="230" height="90" border="0" /></td>
</tr>
</table>
<div id="layer1" style="width:200px; height:75px; position:absolute; left:6px; top:94px; z-index:1; visibility:hidden;border: #e4e4e4 2px solid;">
<p>배너이미지 들어가고</p>
</div>
<p> </p>
</body>
</html>