{以前の HTML では、要素の位置は順番に配置することしかできず、Web ページ内の一部の要素を正確に見つけて制御することは困難でした。 CSS2? カスケード スタイル シート レベル 2、カスケード スタイル シート バージョン 2 の Layout? 属性が表示され、ブラウザーの広範なサポートにより、上記の目的を静的に達成できるだけでなく、マウス、キーボード、時間などに基づいて予測することもできます。定義された外部イベントにより、レイアウトが動的に変更されます。非常に人気のある Web ページの「アクティブ レイヤー」は、そのイメージ アプリケーションです。ここで説明するのは、これらの属性をいくつかの DHTML オブジェクトと組み合わせて使用し、Windows ウィンドウに似たドロップダウン メニューを実装する方法です。 Web ページ (図に示すように))。次のコードと詳細な手順を参照してください。
<?--次の部分はコードの <head> の後に挿入する必要があります-->
<style><?--
/? これらはいくつかの CSS スタイルです。このうち「btnTD」は、ボタンが押される前にボタンを「上げる」スタイルクラスです。境界線は幅1ピクセルの実線に設定され、左と上の境界線は明るい色（ここでは白）になります。 、右下の境界線は幅 1 ピクセルの実線に設定されており、灰色の背景を持つ HTML 要素 (セルなど) がこのスタイルを使用すると、非常に見栄えがよくなります。 「突き出た」ボタンと同様に、「btnDTD」は、ボタンが押されたときに「凹型」になることを意味します。 ?／
． BTNTD? 1 ソリッド #FFFFFF? 1 ソリッド #
808080
?? BTNDTD? 1 ソリッド # 808080? 1 ソリッド
# 808080
??フォン - サイズ
? > >
<?--
//どのボタンが押されたかを決定するグローバル変数
var intBlnClk=0?
//マウスの移動、移動、クリックによりセルが変更されます CSS スタイル
関数 mOvrOut?objSrc??
var argv?argc?blnActive? strColor?strBgColor?strClass?strCursor
?引数?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]?′ｂｔＤＴＤ′?
/? 現在のオブジェクトの前景色を白、背景色を青、マウスのスタイルを手の形に設定します? /
stCoo＝′#ffffff′?str BgColor=′#000080 ''?strCursor= 'hand'?
/? IE4 以降のバージョンでは、CSS
ドキュメントに対するこれらの動的変更のみがサポートされます。 all??
//現在のオブジェクトのマウス スタイルをパラメータに渡された値
objSrc に設定します。スタイル。 cursor=strCursor?
//マウスが現在のオブジェクト範囲に入った場合
if??objSrc.内容?イベント。 fromElement???
/? アクティブなスタイルとして設定しますか? /
if?blnActive?? bgColor=strBgColor?objSrc。スタイル。 color=strColor?
/?現在のオブジェクトをアクティブなスタイルとして設定する必要がない場合、元のスタイルが「凸型ボタン形状」の場合は「凹型ボタン形状」に設定します。それ以外の場合は、
objSrc。 className=?intBlnClk?=0?﹖ srCASD?ttCaas?
//そうでない場合、
マウスは現在のオブジェクト領域を離れます
。ｃｏｎｔａｉｎｓ?ｅｖｅｎｔ． toElement???
// これらのスタイルをデフォルト値
objSrc に設定します。 ｂｇＣｏｌｏｒ＝′′?ｏｂｊＳｒｃ．スタイル。 ｃｏｌｏｒ＝′′?ｏｂｊＳｒｃ． ｃｌａｓｓＮａｍｅ＝′′? ?
??
／? 显示／隐藏层的通用函数。 objNS、objIE、strStu をパラメータとして使用します。objNS と objIE はそれぞれ Netscape と IE の「レイヤー」です。「オブジェクト、strStu はレイヤーの状態です。」スペースの制限があるため、この記事の最後にある手順を参照してください。 ?/
function showHidLayers????
/? コードを簡素化するために、パラメーターで渡されたレイヤーを表示/非表示にするには、上記の関数を呼び出します。詳細な機能についてはここでは説明しません。 ?/
function showLayer?intCurrent???
//--></script> </head>
Element．style.color==''? showLayer?1?''hide'' ?''>
<?--上の本文部分は、マウスがボタンを押さないときに非表示にする必要があるすべての「メニュー」を非表示にします。以下は CSS レイアウトで定義された 2 つのレイヤーです。「menu」という名前のレイヤーの初期状態は次のとおりです。画面上の絶対位置は (12?12) で、レイヤーの z-index 属性は 100 です。見えなくなる。 -->
<div id="menu" style="position?absolute?visi bility?visible?left?12px?top?12px?z-index? 100″><tab llodeeeeeeeeee Ｇ 2 ″ BGCOLOR = ″ # C0C0C0 ″ BORDERCOLOR = '' # C0C0C0 '' ＞ ＞ ＞ ＞ ＞ ＞ ｎ ｎ '' '' '' '' '' '' ''
> Tianji.com </ TD> </ TR > < / テーブル ＞ </ DIV>
<DIV ID =″
″ ″ ″ 位置は 34PX ですか? ????????????????????????
TR ＞ <TD ONMOUSEOVER = ''Movrout?'' onMouseOut=''mOvrOut?this?'' =″100%″nowrap onC lick="window.location=′http?／／ww.pcwclub.com／′? swwLaer1?′iieee″＞コンピュータニュース読者クラブ＜/td＞＜/tr＞
＜/table＞＜ /div＞
スペースの都合上、一部の機能については詳しく説明できません。完全なコードが必要な場合は、次のリンクを参照してください。 http?//ctsighh t. TopCool。ネット/ドキュメント/メニュー。 HTML。