2009. 3. 20. 17:24ㆍ프로그램/ASP · OS
<script language=javascript>
function execSubLayer(){
/* 페이지에서 id='menuLayer' 인 Object 를 찾아서 참조한다. */
var obj = document.getElementById('menuLayer');
/* <TR> 태그들의 갯수만큼 반복을 한다. */
for (i=0;i<obj.rows.length;i++){
/* 두번째 <TD> 태그 하위노드의 0번째가 존재하는지 체크 */
if (typeof(obj.rows[i].cells[1].childNodes[0])!="undefined"){
/* 첫번째 <TD> 에 마우스를 올렸을 때 viewSub 함수를 실행하라고 지정한다.
- this 는 첫번째 <TD> 자기 자신을 가리킨다. */
obj.rows[i].cells[0].onmouseover = function(){ viewSub (this) }
/* 첫번째 <TD> 에 마우스를 올렸을 때 hiddenSub함수를 실행하라고 지정한다.
- this 는 첫번째 <TD> 자기 자신을 가리킨다. */
obj.rows[i].cells[0].onmouseout = function(){ hiddenSub(this) }
/* 두번째 <TD> 의 style 의 position 을 'relative' 로 지정한다.
- 'relative' 로 설정하면 페이지에 달라붙는 효과가 생긴다. (↔'absolute') */
obj.rows[i].cells[1].style.position = "relative";
/* 두번째 <TD> 의 style 의 verticalAlign 을 'relative' 로 지정한다.
- 수직정렬시 위로 붙인다.(↔'bottom') */
obj.rows[i].cells[1].style.verticalAlign = "top";
/* 두번째 <TD> 태그 하위노드에 있는 두번째 <DIV> 태그가 존재하는지 체크 */
if (typeof(obj.rows[i].cells[1].getElementsByTagName('div')[1])!="undefined"){
/* 두번째 <TD> 태그 하위노드에 있는 두번째 <DIV> 에 마우스를 올렸을 때 viewSub 함수를 실행하라고 지정한다.
- this.parentNode.parentNode.parentNode.getElementsByTagName('TD')[0] 는
현재 <DIV> 태그의 상위 <TD> 태그의 상위 <TR> 태그의 상위에서 첫번ㅤㅉㅒㅤ <TD> 태그를 가리킨다. */
obj.rows[i].cells[1].getElementsByTagName('div')[1].onmouseover = function(){ viewSub (this.parentNode.parentNode.parentNode.getElementsByTagName('TD')[0]) };
/* 두번째 <TD> 태그 하위노드에 있는 두번째 <DIV> 에 마우스를 올렸을 때 hiddenSub함수를 실행하라고 지정한다.
- this.parentNode.parentNode.parentNode.getElementsByTagName('TD')[0] 는
현재 <DIV> 태그의 상위 <TD> 태그의 상위 <TR> 태그의 상위에서 첫번ㅤㅉㅒㅤ <TD> 태그를 가리킨다. */
obj.rows[i].cells[1].getElementsByTagName('div')[1].onmouseout = function(){ hiddenSub(this.parentNode.parentNode.parentNode.getElementsByTagName('TD')[0]) };
}
}
}
}
/* 문맥에 따라 임의로 만든 function 입니다. */
function viewSub (obj){
obj.nextSibling.childNodes[1].style.display='';
}
/* 문맥에 따라 임의로 만든 function 입니다. */
function hiddenSub(obj){
obj.nextSibling.childNodes[1].style.display='none';
}
</script>
<body onload="execSubLayer()">
<!-- document.getElementById('menuLayer') -->
<table id='menuLayer' border=1 cellspacing=0 cellpadding=0>
<!-- document.getElementById('menuLayer').rows[0] -->
<TR>
<!-- document.getElementById('menuLayer').rows[0].cells[0] -->
<TD style="background-color:skyblue;height:100;">
<div>메뉴0</div>
</TD>
<!-- document.getElementById('menuLayer').rows[0].cells[1] -->
<TD style="position:absolute;width:100;">
<div style="background-color:yellow;">서브메뉴0</div>
<!-- document.getElementById('menuLayer').rows[0].cells[1].getElementsByTagName('div')[1] -->
<div style="background-color:pink;display:none;">
<div>서브메뉴0-0</div>
<div>서브메뉴0-1</div>
<div>서브메뉴0-2</div>
</div>
</TD>
</TR>
<!-- document.getElementById('menuLayer').rows[1] -->
<TR>
<!-- document.getElementById('menuLayer').rows[1].cells[0] -->
<TD style="background-color:skyblue;height:100;">
<div>메뉴1</div>
</TD>
<!-- document.getElementById('menuLayer').rows[1].cells[1] -->
<TD style="position:absolute;width:100;">
<div style="background-color:yellow;">서브메뉴1</div>
<!-- document.getElementById('menuLayer').rows[1].cells[1].getElementsByTagName('div')[1] -->
<div style="background-color:pink;display:none;">
<div>서브메뉴1-0</div>
<div>서브메뉴1-1</div>
<div>서브메뉴1-2</div>
</div>
</TD>
</TR>
<!-- document.getElementById('menuLayer').rows[2] -->
<TR>
<!-- document.getElementById('menuLayer').rows[2].cells[0] -->
<TD style="background-color:skyblue;height:100;">
<div>메뉴2</div>
</TD>
<!-- document.getElementById('menuLayer').rows[2].cells[1] -->
<TD style="position:absolute;width:100;">
<div style="background-color:yellow;">서브메뉴2</div>
<!-- document.getElementById('menuLayer').rows[2].cells[1].getElementsByTagName('div')[1] -->
<div style="background-color:pink;display:none;">
<div>서브메뉴2-0</div>
<div>서브메뉴2-1</div>
<div>서브메뉴2-2</div>
</div>
</TD>
</TR>
</table>
</body>
'프로그램 > ASP · OS' 카테고리의 다른 글
| ADO에 대한 모든 것 - Connection 개체의 속성 : CursorLocation 속성 (0) | 2009.06.04 |
|---|---|
| IIS7.0 2008 서버, 오류 페이지 설정 편집 (0) | 2009.03.28 |
| showModalDialog로 부모창 컨트롤 (0) | 2009.03.18 |
| showModalDialog 에서 부모창에게 object 를 넘겨주기 예제 by ilikefox (0) | 2009.03.18 |
| 윈도우 설치하고 그 후에 설치한 프로그램 (0) | 2009.01.22 |