レイヤーの表示・非表示切替え、背景色変更の関数を ページのメニュー部に応用した例を示します。 合わせて「kl_addhandler()」を積極的に用いて HTMLデザインとJavaScriptコードの分離(JavaScriptのモジュール化)も考えてみます。

上のHTMLを見ると イベントハンドラなど スクリプトの記述がなく 代わりにID指定があるのみです。

以下が実行されるスクリプトです。 KeyNaviライブラリ関数を用いているのでJavaScriptを最初から書くのに比べると 簡潔＆明快になります。

JavaScript機能のモジュール化 上のコードを見ると 「mload()」内のID指定を 変えるだけで 任意個数、任意レイアウトのHTMLに流用できることが分かります。 以下のような特徴があります。

-	デザイナーは当該タグ内でID指定のみしておけばOK。 タグ内に「onmouseover=処理」など記述する必要が無いのでデザインに注力できる。
-	プログラマーはJavaScriptからイベントハンドラを登録できる。 デザイナーにJavaScript仕様を伝える必要が無い。
-	HTMLコードとJavaScriptコードを独立して扱える。 デザイナーとプログラマーが同時並行で仕事を進められる。

今回のようなデザイン寄りのスクリプトは 全てデザイナーが作るケースも多いので あまり有用性を 実感できませんが 高度なJavaScriptを組み込む場合には重要なアプローチです。

作成したJavaScriptは外部ファイルとしてまとめておくと便利です。 また デザイナーが独自にイベントハンドラ指定をしたとしても 「kl_addhandler()」を使っているため それらを上書きする心配が無いのも安心です。

IDセレクタとJavaScript スタイルシートの指定に「IDセレクタ」を使ったスタイル指定があります。 元になるHTMLコードは CSSを使う場合でも今回のJavaScriptを使う場合でも 同じですが 以下のように実際の表示効果は全く異なります。 CSSの各種指定はJavaScriptからもできるので JavaScriptを積極的に活用してもいいでしょう。

上の例では テーブルセル、リンク、Tipsレイヤー各々でID指定が必要です。 しかしJavaScriptでDOMをうまく使えば ID指定を一箇所のみにしたり 色々工夫できます。 特定IDの要素の子要素のみに適用するといった 文脈セレクタ的な使い方をするのも強力です。 外部モジュールとしての完成度が高まります。

上記HTMLを実行

リンク１

リンク２

動作についての説明 各マウス操作に従い 以下の内容が実行されます。

-	マウスポインタがセル内に入ったら(onmouseover) １．背景色を変更 現在どのセル上にマウスポインタがあるのか分かりやすい。 ２．マウスポインタを「手(hand)」の形に変更 セル上はリンクとして機能することがユーザに伝わります。 ３．Tipsレイヤーを表示 リンク先の説明を表示します。クリックすべきかのユーザの意志決定を補助します。
-	マウスポインタがセルの外に出たら(onmouseout) １．背景色を透明に ２．Tipsレイヤーを隠す
-	セル内でクリックが実行されたら(onclick) １．指定URL「＃」へ移動 クリック先がリンク文字列でなくてもOK。 リンクの範囲がセル全体となり広くなるので クリックしやすく Usabilityが向上します。

上記はレイヤー関数を利用した簡単なサンプルです。 必要に応じてTipsレイヤーの位置を変更しsubメニュー化したり 半透明レイヤーにしたり 色々工夫してみて下さい。

Netscape4.xの問題 Netscape4.xでは テーブルの<td>セルに対し 「onmouseover/onmouseout/onclick」を指定しても 無視されるので何も起こりません。 対応したい場合は 「position:absolute」としたレイヤーを使います。 但し absolute指定は 文字サイズやウィンドウサイズ変更への対応が難しい、 他の要素と被さり易いなど レイアウトしにくいです。 或いはレイヤーを諦めて リンク先ごとに画像(mouseover用も必要)を作成する ケースもあります。

単にTipsレイヤーを表示したい場合は <a>タグにHTML内でハンドラを 指定します (JSからは不可、NS4ではID値からリンクオブジェクトを引けない)。

いずれにせよ 対応コストが格段に上がるので 使用率 0.6% を考慮すると このような見栄え系機能はNS4非対応でもいいでしょう。