TechNote

ポップアップメニュートリガのオーバー状態を維持する方法

はじめに

ポップアップメニューは、スワップイメージ (またはロールオーバーイメージ) によって頻繁に"トリガ" されます。これらのイメージは、訪問者がその上にマウスを置いてポップアップメニューをアクティブにすると外観が変わります。スワップイメージトリガのデフォルトの実装では、訪問者がポップアップメニューにマウスを置いた場合でも、イメージの外にマウスを移動すると、イメージの標準の状態が復元されます。

開発者によっては、訪問者がトリガされたポップアップメニュー上にマウスを置いている間、スワップイメージをオーバー状態のままにする方が望ましいと考える場合があります。このように実装すると、トリガされたポップアップメニューが、トリガとして機能しているオブジェクトの項目のサブセットであることを、訪問者に視覚的に示すことができます。

必要条件

この文書を使用および理解するには、以下の概念に関する実用的な知識が必要です。また、Fireworks MX と Dreamweaver MX を使用してファイルを作成および操作していることを前提とします。

Fireworks のポップアップメニューについて十分に理解している必要があります。
HTML および JavaScript について十分に理解しており、一部の機能で Dreamweaver のコードビューを使用できる必要があります。コードビューでの操作方法の詳細については、Dreamweaver のヘルプシステム ([ヘルプ]-[Dreamweaver MX の使い方]) で「ページコードの使用」内のトピックを参照してください。
Dreamweaver で定義されたサイトが必要です。

メモ :この文書に示された実装方法を不適切に使用して作成された HTML および JavaScript コードに対して、Macromedia テクニカルサポートは一切の責任を負わず、何らかのサポートを提供することもできません。

コード変更方法

手順 1 (Fireworks MX)ポップアップメニューを作成して Dreamweaver サイトに書き出す

Fireworks MX でポップアップメニューを含むファイルを作成します。
この文書に示す方法は、スワップイメージビヘイビアを生成するファイルでのみ有効です。このため、トリガ要素は、2 つの状態を持つボタン、シンプルロールオーバービヘイビアが設定されたスライス、スワップイメージビヘイビアが設定されたスライスのいずれかである必要があります。
HTML およびイメージを Dreamweaver で定義されたサイトに書き出します。
[書き出し] ダイアログボックスで、[名前を付けて保存] に [HTML とイメージ] を選択する必要があります。ポップアップメニューをエクスポートすると、mm_menu.js ファイルも生成されます。この文書ではこのファイルをカスタマイズします。

メモ :この文書に示す方法では、HTML スタイルが Dermaweaver に設定されている必要があります。HTML スタイルを Dreamweaver に設定するには、[ファイル]-[HTML の設定]-[Dreamweaver] を選択します。

手順 2 (Dreamweaver MX)Dreamweaver 環境を設定する

[サイト]-[サイトの編集] をクリックしてサイト名を選択し、[終了] をクリックすることにより、Fireworks HTML をエクスポートしたサイトを開きます。
[サイト] パネルで、Fireworks から書き出された HTML ファイルと mm_menu.js ファイルを開きます。JavaScript ファイルはコードビューで開きますが、HTML ファイルは通常デザインビューで開きます。
HTML ファイルに切り替え、[表示]-[コードビュー] を選択してコードビューに切り替えます。
行番号付けが有効になっていない場合は、[表示]-[コードビューオプション]-[行番号] を選択して行番号付けを有効にします。

手順 3 :Fireworks HTML と JavaScript ファイルのコードを変更する

HTML ファイルで、関数 MM_swapImgRestore を探します。このコード行はコードの先頭にあります。[検索と置換] を使用してコードを検索することもできます。これらのコード行を探す際には以下の図が役立ちます。

メモ :この関数はスワップイメージビヘイビアと共に使用され、Fireworks によって自動的に追加されます。
上の図の行 19 ～ 21 に示す、function MM_swapImgRestore から } までのコードを選択することにより、関数を示す文字列の行を選択します。
この関数を JavaScript ファイルに移動するため、[編集]-[カット] を選択します。

メモ :HTML ファイルから関数をカットすると、HTML ファイル内のすべてのロールオーバーに影響します。ポップアップメニュートリガではないロールオーバーがあり、それらを通常どおりに機能させたい場合は、[編集]-[コピー] を選択し、代替方法の指示に従って操作します。
mm_menu.js という名前のファイルに、JavaScript コードの先頭にあるコードをペーストします。mm_menu.js ファイルのコードが下の図のようになります。JavaScript コメントのすぐ下に関数がペーストされることに注意してください。

代替方法 : 一部のロールオーバーで復元関数を維持するために手順 3 でコードをコピーした場合、関数名に「1」を追加して元の関数と区別します。これにより、JavaScript ファイルにペーストした関数の名前は以下のようになります。

function MM_swapImgRestore1()
HTML ファイルに切り替えます。以下のコードを選択してコピーします。

mm_menu_$.restoreParam = 'restore_img.gif'

メモ :ここでは、実際のイメージ名ではなく「restore_img.gif」を使用する必要があります。
HTML ドキュメントで、mmLoadMenus 関数内の最後のメニュー項目の下に上のコードをペーストします。

コードの正しい場所は、最後のメニューエントリの 1 行後、mm_menu_##########_#.writeMenus() エントリの 2 行前です。ここで、「#」記号は各メインメニューに使用される一意の番号の各桁を表します。

各ポップアップメニューエントリは mm_menu_##########_#.addMenuItem で始まり、mm_menu_##########_#.bgColor またはmm_menu_##########_#.childMenuIcon="images/arrows.gif" で終わります (ポップアップメニューにサブメニューが含まれる場合)。手順 7 の下の図を参照してください。 z
上記で説明したように、各メインメニューは、アンダースコアと 1 桁の番号で構成される一意の 10 桁の番号によって参照されます。ペーストしたコードのドル記号 ($) を、各メインメニューに対応するアンダースコアと 1 桁の番号で構成される 10 桁の番号と置き換えます。これらの番号は、メインメニューエントリから関数 mmLoadMenus にコピーできます。下の例では、金色でハイライト表示された番号の組み合わせが、そのメインメニューの参照番号です。サブメニューが作成されている場合、##########_#_#や##########_#_#_#など、アンダースコアと 1 桁の番号が増えている参照番号がありますが、サブメニューの参照番号について設定する必要はありません。

下のスクリーンショットでは、restoreParam コードの行が各メインメニューにペーストされ、ドル記号がメインメニューの参照番号に置き換えられています。この場合 5 つのメインメニューがあり、各 mm_menu_ の後に表示されている番号が対応するルートメニューの番号です。
[表示]-[デザイン] をクリックしてデザインビューに切り替え、[ウィンドウ]-[ビヘイビア] をクリックして [ビヘイビア] パネルを開きます。
ページ上で各トリガ要素を探します。各トリガ要素には、少なくとも 4 つのビヘイビア、スワップイメージ、スワップイメージの復元、ポップアップメニューを表示、およびポップアップメニューの非表示があります。スワップイメージの復元ビヘイビアを選択し、[ビヘイビア] パネルの [削除] ボタン (マイナス記号のボタン) をクリックしてそのビヘイビアを削除します。スワップイメージビヘイビアが設定されている各トリガ要素に対してこの操作を繰り返します。

代替方法 : ポップアップメニューのトリガとして機能する要素からのみスワップイメージの復元ビヘイビアを削除します。

以下の図に、この操作を実行した場合に実際に削除されるコードを示します。MM_swapImgRestore 関数の呼び出しを削除していますが、onMouseOut アクションは MM_startTimeout 関数で使用されるので、このアクションを維持する必要があることに注意してください。
HTML ファイルを保存して mm_menu.js ファイルに切り替えます。JavaScript ファイルで、"function hideActiveMenus" という名前の関数を検索します。
以下のコードを選択してコピーします。

MM_swapImgRestore( activeMenus[i].Menu.restoreParam);
コピーしたコードを、下の図に示す場所にペーストします。

代替方法 : ポップアップメニューをトリガするロールオーバーだけがこの関数を使用する必要があるので、関数呼び出しに「1」を追加し、前の手順で mm_menu.js ファイルにペーストした関数に対応させます。
mm_menu.js ファイルに対する変更を保存します。ブラウザでポップアップメニューをテストします。

トラブルシューティング

この文書に示す手順を実行すると、通常はボタンが予期したとおりに動作します。ただし、JavaScript は HTML と比べて構文エラーが発生しやすいと言えます。コード内の不適切な場所にスペースが挿入されていると、コードが中断されます。コードの場所についても同様です。JavaScript コードは順番に読み込まれるので、コードが適切な場所にあることが重要です。適切な順序で情報が渡されないと、エラーが発生するか、予期しない結果になります。

追加情報

この文書は、米国 Adobe Systems, Inc. の How to retain the over state for Pop-up Menu triggers in Fireworks MX (TechNote 16565) をもとに作成されました。