基本的な設置方法
さてそれでは、実際にコンポーネントを組み込んで、ホップアップ式メニューを作成してみましょう。
<Html><Title>デモ</Title>
<Head>
<style type="text/css"><!--
DIV { display:none; }
--></style>
<Script Language = "Javascript" src="h_script.js"></Script>
</Head>
<Body OnLoad="startwindow()">
<a href=# OnMouseOver="Hopdiv(1,1,1)" OnMouseOut="Hopdiv(0,0,0)">スタート</a>
<Layer visibility="hidden">
<Div id="Hopup1_1">
ウインドウ1階層目
</Div>
</Layer>
</Body>
</Html>
|
最低限動作させるだけならば、DIVを指定したハイパーリンクで表示させるだけなので、これだけで実現できます。デモ01
<Div> 〜 </Div> の間のHTMLは、普通のタグを制約無しに挿入できます。
例えば<Table>タグを挿入すると、このような形になります。デモ02
ページを読み込みするためには、
1:スタイルシートの標準を「非表示」に設定(非強制)
2:外部コンポーネントの読み込み
3:初期データの読み込みと作成
4:ウインドウ動作用のハイパーリンク
5:実際のウインドウ
の5つを指定する必要があり\、それぞれの色が、HTMLのそれぞれの文章に適応されます。
<Layer>〜</Layer>は必須項目ではありませんが、このタグで<Div>タグを挟み込むことにより、対応していないネットスケープ4において、<Div>タグが表示されてしまう不具合が対処されます。(<Layer>タグはIE5やネットスケープ6では無視されます)
DIVの標準値を非表示に設定 |
<style type="text/css"><!--
DIV { display:none; }
--></style>
|
推奨入力項目です。
他のスタイルシートの設定がある場合は、「 DIV { display:none; } 」の1文を追加してください。
この設定を追加することで、DIV作成時に自動的に非表示設定となります。 スクリプトは読み込み完了次第DIVを非表示にしますが、回線が遅い場合等の読み込み完了に時間がかかる場合に、一瞬DIVが画面に表示されてしまう場合があります。この一文を追加することで回避可能です。 v1.00a [FREE] 20021210 版以降では、記述は必要ありません。
|
外部コンポーネントの読み込み |
<Script Language = "Javascript" src="h_script.js"></Script>
必須入力項目です。 この一文で、外部コンポーネント呼び出しを行います。
src="〜"には、呼び出しするコンポーネントアドレスを入れてください。 上記はHTMLと同じフォルダ内にコンポーネントが存在する場合です。 階層構造がある場合は、src="〜"に階層構造も入力する必要があります
例:src="data/h_script.js" HTMLファイルから見て、コンポーネントがdataフォルダの中にある場合
|
初期データの読み込みと作成 |
<Body OnLoad="startwindow()">
必須入力項目です。 必ずBODY に 「OnLoad="startwindow()"」の1文を追加してください。
このスクリプト文で、HTMLに書き込まれた<Div>タグの内容を解析します。
|
作成したDIタグの制御 |
Hopdiv([階層],[DIV番号],[モード])
作成したDIVタグを制御するには上記の記述を行います。
記述そのものはJavascript文ですので、下記のいずれかの方法で組み込みする必要があります。
<A href="javascript:Hopdiv(1,1,1)">
マウスでクリックしたときに発動をする場合の設定方法
<A href=# OnMouseOver="Hopdiv(1,1,1)">
マウスがハイパーリンク上に載ったときに動作をする場合の設定方法
<A href=# OnMouseOut="Hopdiv(1,1,0)">
マウスがハイパーリンクから外れたときに動作をする場合の設定方法
<A href=# OnMouseOut="Hopdiv(0,0,0)">
全てのレイヤーを消すときの設定 第一階層のDIVを消す場合にはこの設定を入れるほうがより確実に動作します
Hopdiv には、下記のように数値を指定します。
[階層] = レイヤーの階層構造の場所を記述します。
[DIV番号] = 表示させるDIVの番号を記述します。
[モード] = 表示モードの指定をします (0=非表示 1=表示 2=すぐに表示)
例:Hopdiv(1,2,1) ・・・ 1階層の2番目レイヤー(id="Hopup1_2")を表示
例:Hopdiv(3,5,2) ・・・ 3階層の5番目レイヤー(id="Hopup3_5")をすぐに表示
※階層と番号は、後述する「DIVデータの作成」において詳細を説明します
|
DIVデータの作成 |
<Div id="Hopup[階層]_[番号]"> 〜 </Div>
実際に表示するウインドウを作成します。 書き方の制限は上記にあるとおり、"Hopup[階層]_[番号]"によって記述を行います。
階層は、実際に何番目の階層にそのレイヤーが存在するかの識別、番号は、その階層に複数レイヤーがあった場合の識別用となります。
階層情報をもとに、レイヤーの重なり条件や表示条件などを決定していますので、階層構造は正確に記述してください。
|
階層構造を持ったリンクは、デモ03を参照ください。
複数階層の場合は、ウインドウの中に、下位階層のレイヤー情報を表示するためのリンクを作成します。
例:1階層のウインドウから、2階層の1番目のウインドウを呼び出しする場合
<A href=# OnMouseOver="Hopdiv(2,1,1)" OnMouseOut="Hopdiv(2,1,0)">リンク</a>
2階層目以降のウインドウは、マウスの位置と上位階層のウインドウのサイズから自動的に算出されますので、スタイルシートで位置を指定する必要はありません。
位置をスタイルシートで指定すれば、任意の配置にウインドウを指定できます。
1階層目は原則としてスタイルシートにて位置指定をすることをお勧めしますが、指定を行わなくても、マウスの位置から最初に場所を決定し、突飛な場所でウインドウを開かないように設計してあります。
注意 |
HTMLのルートが<Center>タグで中央寄せがされている場合(下記参照)
<Html><Head>
・・・
</Html>
<Body ...>
<Center>
コンテンツ
</Body></Html>
|
この場合は、DIVタグの前で必ず</Center>タグによって中央寄せを解除してください。
<Center>状態でDIVタグを指定すると、ネットスケープ系ブラウザで正常な位置に配置ができなくなります。
<Html><Title>デモ</Title>
<Head>
<Script Language = "Javascript" src="h_script.js"></Script>
</Head>
<Body OnLoad="startwindow()">
<Center>
<a href=# OnMouseOver="Hopdiv(1,1,1)" OnMouseOut="Hopdiv(0,0,0)">スタート</a>
</Center>
<Layer visibility="hidden">
<Div id="Hopup1_1">
ウインドウ1階層目
</Div>
</Layer>
</Body>
</Html>
|
※この現象はIEでは発生しないことから、ネットスケープのDOM解釈の違いかバグであるかと思われます。 いずれ対応したいなぁ・・・とは思うんですが^^
|
1:特徴 / アーカイブ内容
2:設置の流れと注意
3:基本的な設置方法
4:より詳細な設定を付加する方法
5:スクリプト仕様書
|