{이전 HTML에서는 요소의 위치를 순차적으로만 정렬할 수 있었고 웹페이지에서 일부 요소를 정확하게 찾고 제어하는 것이 어려웠습니다. CSS2? Cascading Style Sheet Version 2의 Layout? 속성이 나타나고 브라우저의 광범위한 지원을 통해 위의 목적을 정적으로 달성할 수 있을 뿐만 아니라 마우스, 키보드, 시간 등을 기반으로 예측할 수도 있습니다. . 정의된 외부 이벤트는 레이아웃을 동적으로 변경합니다. 매우 인기 있는 웹 페이지의 "활성 레이어"는 이를 이미지 응용 프로그램으로 사용하는 것입니다. 여기서 설명할 내용은 Windows 창과 유사한 드롭다운 메뉴를 구현하기 위해 일부 DHTML 개체와 결합된 이러한 속성을 사용하는 방법입니다. 웹 페이지(그림 참조)). 다음 코드와 자세한 지침을 참조하세요.
<?--코드의 <head> 뒤에 다음 부분을 삽입해야 합니다.-->
<style><?--
/? 그 중 "btnTD"는 버튼을 누르기 전에 버튼을 "올리는" 스타일 클래스입니다. 테두리는 너비 1픽셀의 실선으로 설정되고 왼쪽 및 위쪽 테두리는 밝은 색상(여기서는 흰색)입니다. , 오른쪽 하단 테두리는 너비가 1픽셀인 실선으로 설정됩니다. 테두리는 어둡습니다(진한 회색). 회색 배경의 HTML 요소(예: 셀)가 이 스타일을 사용하면 매우 보입니다. "돌출된" 버튼과 유사합니다. "btnDTD"는 버튼을 눌렀을 때 "오목하게" 모양이 된다는 의미입니다. ?／
． BNTTD? 왼쪽? 1 솔리드 #FFFFFF? 1 솔리드 # 808080? 1 솔리드
#FFFFFF
?
BTNDTD? 1 SOLID # 808080 ? 1 SOLID # FFFFFF
??
TD
?
> ＞
<?--
//어떤 버튼을 눌렀는지 결정하는 전역 변수
var intBlnClk=0?
//셀을 변경하기 위해 마우스가 통과하고 나가고 클릭됩니다. CSS 스타일
함수 mOvrOut?objSrc??
var argv?argc?blnActive? strColor?strBgColor?strClass?strClassD?
argv=mOvrOut. 인수?argc=argv. length?
/?현재 개체를 기본적으로 "활성"으로 설정하지 않습니까?/
blnActive=?argc>1?﹖ eva?argv[1]??false?
/?마우스가 지나갔을 때 현재 객체의 기본 스타일은 "돌출된 버튼 모양"입니까?/
strClass=?argc>2 && arg v[2]?=′′?﹖ argv[2]?'btnTD'?
/?마우스를 클릭하면 기본적으로 현재 객체는 "오목한 버튼 모양"입니까?/
strClassD=?argc>3 && argv[3 ]?=′′?﹖ argv[3]?′ｂｔＤＴＤ′?
/? 현재 개체의 전경색을 흰색으로, 배경색을 파란색으로 설정하고, 마우스 스타일을 손 모양으로 설정하시겠습니까? /
ｓｔＣｏｏ="#ffffff′?str BgColor=′#000080 ``?strCursor= 'hand'?
/? IE4 이상 버전에서는 CSS 스타일에 대한 이러한 JavaScript 동적 변경만 지원합니까
? all??
//현재 객체의 마우스 스타일을 매개변수로 전달된 값
objSrc로 설정합니다. 스타일. 커서=strCursor?
//마우스가 현재 개체 범위에 들어간 경우
if??objSrc. 내용?이벤트. fromElement???
/? 활성 스타일로 설정하시겠습니까? /
if?blnActive?? bgColor=strBgColor?objSrc. 스타일. color=strColor?
/?현재 객체를 활성 스타일로 설정할 필요가 없을 때 원래 스타일이 "돌출된 버튼 모양"이면 "오목한 버튼 모양"으로 설정하고 그 반대도 마찬가지입니까?/
else objSrc. className=?intBlnClk?=0?﹖ ｓｒＣａｓＤ?ｔｔＣａａｓ?
//다른 경우에는 마우스가 현재 개체 영역을 떠납니다.
??objSrc. 내용?이벤트. toElement???
// 이 스타일을 기본값인
objSrc로 설정합니다. bgColor=′′?objSrc. 스타일. color=′′?objSrc. ｃｌａｓＮｍｍｅｅｅｅｅｅ
/
? 레이어 표시/숨기기에 대한 일반 기능입니다. objNS, objIE, strStu를 매개변수로 사용합니다. 여기서 objNS와 objIE는 각각 Netscape 및 IE의 "계층"입니다. "Object, strStu는 계층의 상태입니다. 공간 제한으로 인해 이 문서 끝에 있는 지침을 참조하세요. ?/
function showHidLayers????
/? 매개변수에 의해 전달된 레이어를 표시하거나 숨기려면 위 함수를 호출하세요. 이는 코드를 단순화하기 위한 것입니다. 자세한 기능은 여기에 나와 있지 않습니다. ?/
function showLayer?intCurrent???
//--></script> </head>
Element．style．color="="? showLayer?1?'hide' ?″>
<?-- 위의 본문 부분은 마우스가 아무 버튼도 누르지 않을 때 숨겨야 하는 모든 "메뉴"를 숨기는 것입니다. 다음은 CSS 레이아웃으로 정의된 두 레이어입니다. "menu"라는 레이어의 초기 상태는 다음과 같습니다. 화면의 절대 위치는 (12?12)이고, 레이어의 z-index 속성은 100입니다. 눈에 띄지 않게. -->
<div id="menu" style="position?absolute?visi bility? visible?left?12px?top?12px? z-index? 100″><tab ｌｌｏｄｅｅｅｅｅｅｅｅ Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = ″ # C0C0C0 ″ ＞ ＞ ＞ ＞ ＞ ｎ ｎ ｎ ″ ″ ″ ″ ″ ″ ″ ″ ″ ″>
Tianji.com < / TD> < / TR > < / 테이블 ＞ < / DIV>
<DIV ID =″
메뉴1 ″ ″ 위치? 11px? 34PX ? ????????????????????????????
TR ＞ <TD ONMOUSEOVER = ″ Movout?″ onMouseOut=″mOvrOut?this?″ 너비 =″100%″nowrap onC lick="ｗindow.location=′http?/ｗｗ.pcwclub.com／′? ｓｗｗＬａｅｒ1?′ｉｉｅｅｅ″>컴퓨터 뉴스 독자 클럽</td></tr>
</table>< /div>
공간 제한으로 인해 일부 기능은 제공 및 자세히 설명되지 않습니다. 전체 코드가 필요한 경우 다음 링크를 방문하세요. http?//ctsighｈ t. 탑쿨. 넷/문서/메뉴. html.