Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

ナビゲーションバーの作成

Shirley's i-box Shirley's little-box JAVA Script sample CSS sample JAVA Applet sample
ロールオーバーの発展形であるナビゲーションバーを使用すると、あるボタンがダウン状態になったら現在ダウン状態にあるボタンがアップ状態に変化するといった、ボタン同士の連動した動作を実現することができます。

■ イメージの準備

ナビゲーションバーの作成には、複数のボタンイメージが必要です。さらに、1つのボタンにつき、通常の状態である【アップイメージ】、マウスポインタが重なった状態である【オーバーイメージ】、そしてクリックされた後の状態である【ダウンイメージ】、ダウン状態中にマウスポインタが重なった【ダウン中オーバーイメージ】の4種類のイメージが必要になります。また、これらのイメージはずべて縦横のサイズが同一である必要があります。

 

■ 【ナビゲーションバーの挿入】ダイアログ

ナビゲーションバーの一つ目のボタンを挿入したい位置にカーソルを置き、【挿入】バーの【一般】カテゴリから【ナビゲーションバーの挿入】ボタンをクリックして、【ナビゲーションバーの挿入】ダイアログを表示させます。
【エレメント名】には、ボタンの名称を入力します。【アップイメージ】【オーバーイメージ】【ダウンイメージ】【ダウン中オーバーイメージ】には、現在設定中のボタンを使用するイメージファイルを指定します。
必要に応じて【代替テキスト】、【クリック時にURLへ移動】を設定します。ナビゲーションバーとコンテンツを別フレームに配置する場合は、【クリック時にURLへ移動】にフレーム名を入力します。
【オプション】では、【イメージのプリロード】にチェックを入れます。これで、ナビゲーションバーに使うイメージすべてを予めロードできます。【最初に”ダウンイメージ”を表示】にチェックを入れると、設定中のボタンのデフォルト状態を、現在いるページを示すダウン状態にします。
以上の手順をナビゲーションバーのグループ内で使用するボタンの個数分繰り返し行います。ボタンを追加するにはダイアログ最上段の【ナビゲーションバーエレメント】領域の【+】ボタンをクリックします。

■ 【最初に”ダウンイメージ”を表示】

ナビゲーションバー専用のフレームを設けずにナビゲーションバーを利用する場合、ページごとにナビゲーションバーを埋め込むことになります。これでは、別ページにジャンプしてもロードされたナビゲーションバーの各ボタンはアップイメージ状態として表示されてしまいます(つまり、ボタン同士が連動して動作しているように見えなくなってしまいます)。この問題を解決するには、【修正】メニューの【ナビゲーションバー】で【ナビゲーションの修正】ダイアログを表示させ、配置するページに合わせて、ボタンの【最初に”ダウンイメージ”を表示】のオプションを設定しなおします。
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box