묻고답하기
[긴급]메뉴에 대한 질문입니다...ㅠㅠ;
2006.07.10 15:40
윤미쩜넷이라고 하는 굉장히 유용한 사이트가 있는데...
이곳의 자바스크립트, CSS강좌중 메뉴부분에서요...
(클릭->)플래시 처럼 Fade되는 메뉴하고요...
(클릭->)마우스 오버시 나타나는 반투명 하위메뉴를...
같이 조합하는 방법이 있나요??
두 강좌의 소스를 섞어서 삽입해보니깐...
이상한 에러메시지가 나와서...정말 난감하네요...
이 부분좀 꼭좀 해결 부탁드립니다...
이곳의 자바스크립트, CSS강좌중 메뉴부분에서요...
(클릭->)플래시 처럼 Fade되는 메뉴하고요...
(클릭->)마우스 오버시 나타나는 반투명 하위메뉴를...
같이 조합하는 방법이 있나요??
두 강좌의 소스를 섞어서 삽입해보니깐...
이상한 에러메시지가 나와서...정말 난감하네요...
이 부분좀 꼭좀 해결 부탁드립니다...
onmouseover="doTrans();show('sub1')" 처럼 ; 로 분리하여 추가하세요
<style type="text/css">
.item{font-family:lucida console;font-size:9pt;FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=0.75); FONT: 9pt/1.3 verdana; WIDTH:100px; COLOR: black; HEIGHT: 12px; BACKGROUND-COLOR:#424242;text-align:center;color:white;cursor:hand;"}
</style>
<script>
//////////////////////////////////////////////////////////////////////////
// http://my.dreamwiz.com/jsreference
//////////////////////////////////////////////////////////////////////////
var textArr=new Array("메인으로~","윤미소개","게시판","자료실");
var originArr=new Array("Main","Yoonmi","Board","DataBank");
function doTrans() {
var eSrc=event.srcElement
var idx=eSrc.cellIndex;
eSrc.filters[0].apply();
eSrc.innerText=textArr[idx];
eSrc.style.background="#E71018";
eSrc.filters[0].play();
}
function rollback(){
var eSrc=event.srcElement;
var idx=eSrc.cellIndex;
eSrc.innerText=originArr[idx];
eSrc.style.background="#424242";
}
</script>
<script language="JavaScript">
<!--
ns = (document.layers)? true:false
ie = (document.all)? true:false
function show(id) {
if (ns) document.layers[id].visibility = "visible"
else if (ie) document.all[id].style.visibility = "visible"
}
function hide(id) {
if (ns) document.layers[id].visibility = "hidden"
else if (ie) document.all[id].style.visibility = "hidden"
}
//-->
</script>
<style type="text/css">
#sub1, #sub2, #sub3, #sub4
{visibility:hidden; background-color:#e1e1e1; width:120; border:1px solid #cccccc; padding:7; font-family:tahoma; font-size:7pt; font-weight:bold; line-height:150%; filter: Alpha(Opacity=70)}
</style>
<body> </body>
<table width=400 cellspacing=0 align="center">
<tr>
<td width=100 class="item" onmouseover="doTrans();show('sub1')" onmouseout="rollback();hide('sub1')">Main</td>
<td width=100 class="item" onmouseover="doTrans();show('sub2')" onmouseout="rollback();hide('sub2')">Yoonmi</td>
<td width=100 class="item" onmouseover="doTrans();show('sub3')" onmouseout="rollback();hide('sub3')">Board</td>
<td width=100 class="item" onmouseover="doTrans();show('sub4')" onmouseout="rollback();hide('sub4')">DataBank</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="330" align="center">
<tr>
<td>
<div style="position:relative;top:0;left:0">
<div id="sub1" style="position:absolute;top:-5;left:5" onmouseover="show('sub1')" onmouseout="hide('sub1')">
<a href="http://www.yoonmi.net/" >sub menu 1</a><br>
<a href="http://www.yoonmi.net/">sub menu 2</a><br>
<a href="http://www.yoonmi.net/">sub menu 3</a><br>
<a href="http://www.yoonmi.net/">sub menu 4</a><br>
<a href="http://www.yoonmi.net/">sub menu 5</a><br>
<a href="http://www.yoonmi.net/">sub menu 6</a><br>
</div>
<div id="sub2" style="position:absolute;top:-5;left:110" onmouseover="show('sub2')" onmouseout="hide('sub2')">
<a href="http://www.yoonmi.net/">sub menu 1</a><br>
<a href="http://www.yoonmi.net/">sub menu 2</a><br>
<a href="http://www.yoonmi.net/">sub menu 3</a><br>
<a href="http://www.yoonmi.net/">sub menu 4</a><br>
<a href="http://www.yoonmi.net/">sub menu 5</a><br>
<a href="http://www.yoonmi.net/">sub menu 6</a><br>
</div>
<div id="sub3" style="position:absolute;top:-5;left:200" onmouseover="show('sub3')" onmouseout="hide('sub3')">
<a href="http://www.yoonmi.net/">sub menu 1</a><br>
<a href="http://www.yoonmi.net/">sub menu 2</a><br>
<a href="http://www.yoonmi.net/">sub menu 3</a><br>
<a href="http://www.yoonmi.net/">sub menu 4</a><br>
<a href="http://www.yoonmi.net/">sub menu 5</a><br>
<a href="http://www.yoonmi.net/">sub menu 6</a><br>
</div>
<div id="sub4" style="position:absolute;top:-5;left:300" onmouseover="show('sub4')" onmouseout="hide('sub4')">
<a href="http://www.yoonmi.net/">sub menu 1</a><br>
<a href="http://www.yoonmi.net/">sub menu 2</a><br>
<a href="http://www.yoonmi.net/">sub menu 3</a><br>
<a href="http://www.yoonmi.net/">sub menu 4</a><br>
<a href="http://www.yoonmi.net/">sub menu 5</a><br>
<a href="http://www.yoonmi.net/">sub menu 6</a><br>
</div>
</div>
</td>
</tr>
</table>