JavaScript に組み込まれているビヘイビアーの適用

最終更新日 : 2021年4月27日

Adobe Dreamweaverでビルトイン JavaScript ビヘイビアを適用する方法を理解するために、このトピックを使用してください。

組み込みビヘイビアーの使用

Dreamweaverに含まれているビヘイビアは、モダンなブラウザーで動作するように作成されています。古いブラウザーでは、ビヘイビアーはエラーを報告せずに終了します。

メモ

Dreamweaverアクションは、可能な限り多くのブラウザーで動作するように注意深く作成されています。Dreamweaverアクションからコードを手動で削除したり、独自のコードに置き換えたりすると、クロスブラウザー互換性が失われる可能性があります。

Dreamweaver アクションはクロスブラウザー互換性を最大化するように作成されていますが、一部のブラウザーは JavaScript を全くサポートしておらず、web を閲覧する多くのユーザーがブラウザーで JavaScript をオフにしています。最適なクロスプラットフォーム結果を得るために、<noscript>タグで囲まれた代替インターフェイスを提供し、JavaScriptを使用できないユーザーがサイトを使用できるようにしてください。

「JavaScript の呼出し」ビヘイビアーの適用

Call JavaScript ビヘイビアは、イベントが発生したときにカスタム関数または JavaScript コードを実行します。(スクリプトを自分で作成することも、webで自由に利用できる様々なJavaScriptライブラリで提供されているコードを使用することもできます。)

オブジェクトを選択し、ビヘイビアパネルの「ビヘイビアを追加」メニューから「Call JavaScript」を選択します。
実行する正確なJavaScriptを入力するか、関数名を入力します。

例えば、「戻る」ボタンを作成するには、「if (history.length > 0){history.back()}」と入力します。 コードを関数にカプセル化している場合は、関数名のみを入力してください(例:hGoBack())。

「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「プロパティの変更」ビヘイビアーを適用します。

Change Property ビヘイビアを使用して、オブジェクトのプロパティのうち 1 つの値を変更します(例:div の背景色やフォームのアクション)。

メモ

HTMLとJavaScriptに非常に精通している場合にのみ、このビヘイビアを使用してください。

オブジェクトを選択し、ビヘイビアパネルのビヘイビアを追加メニューからChange Propertyを選択します。
要素のタイプメニューから、そのタイプの識別されたすべての要素を表示する要素タイプを選択します。
エレメントの ID メニューからエレメントを選択します。
プロパティメニューからプロパティを選択するか、ボックスにプロパティ名を入力します。
新しい値フィールドに新しいプロパティの新しい値を入力します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「プラグインのチェック」ビヘイビアーの適用

Check Plugin ビヘイビアを使用して、指定されたプラグインがインストールされているかどうかに応じて、訪問者を異なるページに誘導します。例えば、訪問者にShockwaveがある場合は1つのページに、ない場合は別のページに移動してもらいたい場合があります。

メモ

JavaScriptを使用してInternet Explorerで特定のプラグインを検出することはできません。ただし、FlashまたはDirectorを選択すると、WindowsのInternet Explorerでこれらのプラグインを検出するための適切なVBScriptコードがページに追加されます。プラグインの検出は、Mac OS の Internet Explorer では実行できません。

オブジェクトを選択し、ビヘイビアパネルの「ビヘイビアを追加」メニューから「Check Plugin」を選択します。
プラグインメニューからプラグインを選択するか、Enterをクリックして隣接するボックスにプラグインの正確な名前を入力します。

Netscape Navigator の About Plug‑ins ページで太字で指定されているとおり、プラグインの正確な名前を使用する必要があります。(Windows では、Navigator の「ヘルプ」>「About Plug‑ins」コマンドを選択します。Mac OS では、Apple メニューから「About Plug‑ins」を選択します。)

「If Found, Go To URL」ボックスで、プラグインを持つ訪問者向けの URL を指定します。

リモート URL を指定する場合は、アドレスに http:// 接頭辞を含める必要があります。フィールドを空白のままにすると、訪問者は同じページにとどまります。

「Otherwise, Go To URL」ボックスで、プラグインを持たない訪問者向けの代替 URL を指定します。フィールドを空白のままにすると、訪問者は同じページにとどまります。
プラグインを検出できない場合の動作を指定します。 デフォルトでは、検出が不可能な場合、訪問者は「Otherwise」ボックスに記載された URL に送られます。代わりに訪問者を最初の(If Found)URL に送るには、「Always Go To First URL If Detection Is Not Possible」オプションを選択します。選択すると、このオプションは事実上「ブラウザーがプラグインが存在しないことを明示的に示さない限り、訪問者がプラグインを持っていると仮定する」ことを意味します。一般的に、プラグインコンテンツがページに不可欠な場合はこのオプションを選択し、そうでない場合は選択解除のままにします。
メモ

このオプションは Internet Explorer にのみ適用されます。Netscape Navigator では常にプラグインを検出できます。

「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「AP エレメントをドラッグ」ビヘイビアーの適用

Drag AP Element ビヘイビアーを使用すると、訪問者は絶対配置(AP)エレメントをドラッグできます。このビヘイビアーを使用して、パズル、スライダーコントロール、その他の移動可能なインターフェイスエレメントを作成します。

訪問者が AP エレメントをドラッグできる方向(水平方向、垂直方向、または任意の方向)、訪問者が AP エレメントをドラッグするターゲット、AP エレメントがターゲットの特定のピクセル数以内にある場合に AP エレメントをターゲットにスナップするかどうか、AP エレメントがターゲットにヒットしたときの動作などを指定できます。

Drag AP Element ビヘイビアーは訪問者が AP エレメントをドラッグする前に呼び出される必要があるため、Drag AP Element をbodyオブジェクト(onLoadイベント)に添付する必要があります。

「挿入」>「レイアウトオブジェクト」>「AP Div」を選択するか、挿入パネルの「AP Div を描画」ボタンをクリックして、ドキュメントウィンドウのデザインビューで AP Div を描画します。
ドキュメントウィンドウの左下にあるタグセレクターで <body> をクリックします。
ビヘイビアーパネルの「ビヘイビアーを追加」メニューから「Drag AP Element」を選択します。

「Drag AP Element」が使用できない場合、おそらく AP エレメントが選択されています。

AP エレメントポップアップメニューで、AP エレメントを選択します。
「Movement」ポップアップメニューから「Constrained」または「Unconstrained」を選択します。

制約のない移動は、パズルやその他のドラッグ&ドロップゲームに適しています。スライダーコントロールやファイル引き出し、カーテン、ミニブラインドなどの移動可能な装飾には、制約された移動を選択します。

制約された移動の場合、「Up」、「Down」、「Left」、「Right」ボックスに値(ピクセル単位)を入力します。

値は AP エレメントの開始位置に対する相対値です。長方形の領域内で移動を制約するには、4 つのボックスすべてに正の値を入力します。垂直方向の移動のみを許可するには、 上下に正の値を入力し、左右に0を入力します。 水平方向の移動のみを許可するには、左右に正の値を入力し、上下に0を入力します。

左と上のボックスに、ドロップターゲットの値をピクセル単位で入力します。

ドロップターゲットは、訪問者にAP要素をドラッグしてもらいたい場所です。AP要素は、その左と上の座標が「左」と「上」のボックスに入力した値と一致したときに、ドロップターゲットに到達したと見なされます。値はブラウザーウィンドウの左上隅を基準とします。「現在の位置を取得」をクリックすると、AP要素の現在位置がテキストボックスに自動的に入力されます。

範囲内でスナップボックスに値(ピクセル単位)を入力して、AP要素がターゲットにスナップする前に、訪問者がドロップターゲットにどの程度近づく必要があるかを決定します。

値が大きいほど、訪問者がドロップターゲットを見つけやすくなります。

シンプルなパズルやシーン操作の場合は、ここで終了できます。AP要素のドラッグハンドルを定義し、ドラッグ中のAP要素の動きをトラッキングし、AP要素がドロップされたときにアクションをトリガーするには、詳細タブをクリックします。
訪問者がAP要素をドラッグするためにAP要素の特定の領域をクリックする必要があることを指定するには、ドラッグハンドルメニューから「要素内の領域」を選択してから、ドラッグハンドルの左と上の座標、幅と高さを入力します。

このオプションは、AP要素内の画像にタイトルバーや引き出しハンドルなど、ドラッグを示唆する要素が含まれている場合に便利です。訪問者がAP要素内のどこでもクリックしてドラッグできるようにしたい場合は、このオプションを設定しないでください。

使用する「ドラッグ中」オプションを次の中から選択します。
  • ドラッグ中にAP要素が積み重ね順序の前面に移動する必要がある場合は、「要素を前面に移動」を選択します。このオプションを選択した場合は、ポップアップメニューを使用して、AP要素を前面に残すか、積み重ね順序の元の位置に復元するかを選択します。

  • AP要素のドラッグ中にコードまたは関数を繰り返し実行するには、Call JavaScriptボックスにJavaScriptコードまたは関数名(例:monitorAPelement())を入力します。たとえば、AP要素の座標を監視し、「近づいています」や「ドロップターゲットから遠く離れています」などのヒントをテキストボックスに表示する関数を作成できます。

AP要素がドロップされたときにコードまたは関数を実行するには、2番目のJavaScriptを呼び出すボックスにJavaScriptコードまたは関数名(例:evaluateAPelementPos())を入力します。AP要素がドロップターゲットに到達した場合にのみJavaScriptを実行する必要がある場合は、スナップした場合のみを選択します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

ドラッグ可能な AP エレメントについての情報収集

AP要素をドラッグビヘイビアーをオブジェクトに添付すると、DreamweaverはドキュメントのheadセクションにMM_dragLayer()関数を挿入します。(この関数は、以前のバージョンのDreamweaverで作成されたレイヤーが編集可能なまま残るように、AP要素の古い命名規則(つまり「Layer」)を保持しています。)この関数は、AP要素をドラッグ可能として登録することに加えて、各ドラッグ可能なAP要素に対して3つのプロパティ(MM_LEFTRIGHTMM_UPDOWNMM_SNAPPED)を定義します。これらのプロパティは独自のJavaScript関数で使用して、AP要素の相対的な水平位置、AP要素の相対的な垂直位置、およびAP要素がドロップターゲットに到達したかどうかを判断できます。

メモ

ここで提供される情報は、経験豊富なJavaScriptプログラマーのみを対象としています。

たとえば、次の関数は、curPosFieldと呼ばれるフォームフィールドにMM_UPDOWNプロパティ(AP要素の現在の垂直位置)の値を表示します。(フォームフィールドは、動的であるため、継続的に更新される情報の表示に便利です。つまり、ページの読み込みが完了した後でも内容を変更できます。)

function getPos(layerId){

var layerRef = document.getElementById(layerId);

var curVertPos = layerRef.MM_UPDOWN;

document.tracking.curPosField.value = curVertPos;

}

MM_UPDOWNまたはMM_LEFTRIGHTの値をフォームフィールドに表示する代わりに、これらの値を他のさまざまな方法で使用することもできます。 例えば、値がドロップゾーンにどれくらい近いかに応じてフォームフィールドにメッセージを表示する関数を書いたり、値に応じてAP要素を表示または非表示にする別の関数を呼び出したりできます。

ページに複数のAP要素があり、訪問者が次のページまたはタスクに進む前に、すべてがターゲットに到達する必要がある場合、MM_SNAPPEDプロパティを読み取ることは特に便利です。 例えば、MM_SNAPPED値がtrueのAP要素の数をカウントする関数を書いて、AP要素がドロップされるたびにそれを呼び出すことができます。 スナップされた数が所定の数に達したら、訪問者を次のページに移動させたり、お祝いのメッセージを表示したりできます。

「URL に移動」ビヘイビアーの適用

Go To URLビヘイビアーは、現在のウィンドウまたは指定されたフレームで新しいページを開きます。 このビヘイビアーは、1回のクリックで2つ以上のフレームの内容を変更するのに便利です。

オブジェクトを選択し、ビヘイビアーパネルの「ビヘイビアーを追加」メニューから「Go To URL」を選択します。
開くロケーションリストから URL の移動先を選択します。

「開く場所」リストには、現在のフレームセット内のすべてのフレームの名前とメインウィンドウが自動的に一覧表示されます。 フレームがない場合、メインウィンドウが唯一のオプションです。

メモ

フレームの名前がtop、blank、self、またはparentの場合、このビヘイビアーは予期しない結果を生じる可能性があります。 ブラウザーは、これらの名前を予約されたターゲット名と間違えることがあります。

「参照」をクリックして開くドキュメントを選択するか、URLボックスにドキュメントのパスとファイル名を入力します。
手順2と3を繰り返して、他のフレームで追加のドキュメントを開きます。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「ジャンプメニュー」ビヘイビアーの適用

挿入/フォーム/ジャンプメニューを使用してジャンプメニューを作成すると、Dreamweaverはメニューオブジェクトを作成し、そのオブジェクトにジャンプメニュー(またはジャンプメニューGo)ビヘイビアーを適用します。 通常、ジャンプメニュービヘイビアーを手動でオブジェクトに適用する必要はありません。

既存のジャンプメニューは、次の2つの方法のいずれかで編集できます。

  • ビヘイビアーパネルで既存のジャンプメニュービヘイビアーをダブルクリックすると、メニュー項目の編集と並べ替え、ジャンプ先のファイルの変更、それらのファイルを開くウィンドウの変更ができます。

  • メニューを選択してプロパティインスペクターの「リスト値」ボタンを使用することで、他のメニューの項目を編集するのと同じようにメニューの項目を編集できます。

ドキュメントにジャンプメニューオブジェクトがまだない場合は、作成します。
オブジェクトを選択し、ビヘイビアーパネルの「ビヘイビアーを追加」メニューから「ジャンプメニュー」を選択します。
ジャンプメニューダイアログボックスで必要に応じて変更を行い、「OK」をクリックします。

「ジャンプメニュー移動」ビヘイビアーの適用

ジャンプメニューGoビヘイビアーは、ジャンプメニュービヘイビアーと密接に関連しています。ジャンプメニューGoを使用すると、Goボタンをジャンプメニューに関連付けることができます。(このビヘイビアーを使用する前に、ドキュメント内にジャンプメニューが既に存在している必要があります。)Goボタンをクリックすると、ジャンプメニューで選択されているリンクが開きます。ジャンプメニューには通常Goボタンは必要ありません。ジャンプメニューから項目を選択すると、一般的にはユーザーによる追加のアクションを必要とせずにURLが読み込まれます。ただし、訪問者がジャンプメニューで既に選択されているのと同じ項目を選択した場合、ジャンプは発生しません。一般的には問題ありませんが、ジャンプメニューがフレーム内に表示され、ジャンプメニュー項目が他のフレーム内のページにリンクしている場合、Goボタンがあると便利なことがよくあります。これにより、訪問者はジャンプメニューで既に選択されている項目を再選択できます。

メモ

ジャンプメニューでGoボタンを使用する場合、Goボタンはメニュー内の選択に関連付けられたURLにユーザーを「ジャンプ」させる唯一のメカニズムになります。ジャンプメニューでメニュー項目を選択しても、ユーザーが自動的に別のページまたはフレームにリダイレクトされなくなります。

Goボタンとして使用するオブジェクト(通常はボタン画像)を選択し、ビヘイビアーパネルの「ビヘイビアーを追加」メニューから「ジャンプメニューGo」を選択します。
「ジャンプメニューを選択」メニューで、Goボタンでアクティブ化するメニューを選択し、「OK」をクリックします。

「ブラウザーウィンドウを開く」ビヘイビアーの適用

ブラウザーウィンドウを開くビヘイビアーを使用して、新しいウィンドウでページを開きます。新しいウィンドウのプロパティ(サイズ、属性(サイズ変更可能かどうか、メニューバーがあるかどうかなど)、名前など)を指定できます。例えば、このビヘイビアーを使用して、訪問者がサムネイル画像をクリックしたときに別のウィンドウでより大きな画像を開くことができます。このビヘイビアーを使用すると、新しいウィンドウを画像の正確なサイズにできます。

ウィンドウに属性を指定しない場合、そのウィンドウを開いた元のウィンドウのサイズと属性で開きます。ウィンドウの属性を指定すると、明示的にオンにされていない他のすべての属性が自動的にオフになります。例えば、ウィンドウに属性を設定しない場合、1024 x 768ピクセルで開き、ナビゲーションバー(戻る、進む、ホーム、リロードボタンを表示)、ロケーションツールバー(URLを表示)、ステータスバー(下部にステータスメッセージを表示)、メニューバー(ファイル、編集、表示などのメニューを表示)が表示される場合があります。幅を640、高さを480に明示的に設定し、他の属性を設定しない場合、ウィンドウは640 x 480ピクセルで、ツールバーなしで開きます。

オブジェクトを選択し、ビヘイビアーパネルの「ビヘイビアーを追加」メニューから「ブラウザーウィンドウを開く」を選択します。
「を参照」をクリックしてファイルを選択するか、表示したいURLを入力します。
ウィンドウの幅と高さ(ピクセル単位)、および各種ツールバー、スクロールバー、サイズ変更ハンドルなどの表示に関するオプションを設定します。リンクのターゲットにしたい場合やJavaScriptで制御したい場合は、ウィンドウに名前を付けます(スペースや特殊文字は使用しないでください)。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「ポップアップメッセージ」ビヘイビアーの適用

ポップアップメッセージビヘイビアーは、指定したメッセージでJavaScriptアラートを表示します。JavaScriptアラートにはボタンが1つ(OK)しかないため、このビヘイビアーは選択肢を提示するのではなく、ユーザーに情報を提供するために使用します。

テキストには、任意の有効なJavaScript関数呼び出し、プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript式を埋め込むには、波括弧({})内に配置します。波括弧を表示するには、 バックスラッシュを前に付けます(\{)。

例:

このページの URL は {window.location} で、今日は {new Date()} です。

メモ

ブラウザーがアラートの外観をコントロールします。外観をより詳細にコントロールしたい場合は、 ブラウザーウィンドウを開くビヘイビアーの使用を検討してください。

オブジェクトを選択し、ビヘイビアーパネルの ビヘイビアーを追加メニューからポップアップメッセージを選択します。
「メッセージ」テキストボックスにメッセージを入力します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「イメージのプリロード」ビヘイビアーの適用

画像プリロードビヘイビアーは、ページが最初に表示されるときに表示されない画像(例えば、ビヘイビアーやスクリプトで入れ替わる画像)をキャッシュすることで表示時間を短縮します。

メモ

画像のスワップビヘイビアーでは、画像のスワップ ダイアログボックスで画像をプリロードオプションを選択すると、 すべてのハイライト画像が自動的にプリロードされるため、画像のスワップを 使用する際に画像をプリロードを手動で追加する必要はありません。

オブジェクトを選択し、ビヘイビアーパネルの ビヘイビアーを追加メニューから画像をプリロードを選択します。
を参照をクリックして画像ファイルを選択するか、Image Source ファイルボックスに画像のパスとファイル名を入力します。
ダイアログボックス上部のプラス(+)ボタンをクリックして、 画像を画像をプリロードリストに追加します。
現在のページにプリロードしたい残りのすべての画像に対して、手順2と3を繰り返します。
プリロード画像リストから画像を削除するには、画像を選択してマイナス(–)ボタンをクリックします。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「フレームテキストを設定」ビヘイビアーの適用

フレームテキストを設定ビヘイビアを使用すると、フレームのテキストを動的に設定し、フレームのコンテンツと書式を指定したコンテンツに置き換えることができます。コンテンツには、任意の有効なHTMLコードを含めることができます。このビヘイビアーを使用して、情報を動的に表示します。

フレームテキストを設定ビヘイビアはフレームの書式を置き換えますが、背景色を保持を選択して、ページの背景とテキストカラー属性を保持することができます。

テキストには、任意の有効なJavaScript関数呼び出し、プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript式を埋め込むには、中括弧({})で囲みます。中括弧を表示するには、バックスラッシュを前に付けます(\{)。

例:

このページのURLは {window.location} で、今日は {new Date()} です。

オブジェクトを選択し、ビヘイビアパネルの「ビヘイビアを追加」メニューから「テキストを設定」>「フレームのテキストを設定」を選択します。
フレームテキストを設定ダイアログボックスで、フレームメニューからターゲットフレームを選択します。
現在のHTMLを取得ボタンをクリックして、ターゲットフレームの本文セクションの現在のコンテンツをコピーします。
「新規 HTML」テキストボックスにメッセージを入力します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

コンテナテキストを設定ビヘイビアを適用します

Set Text Of Container ビヘイビアは、 ページ上の既存のコンテナ(つまり、テキストまたは他の要素を 含むことができる任意の要素)のコンテンツと書式を、指定した コンテンツに置き換えます。 コンテンツには、有効な HTML ソースコードを含めることができます。

テキスト内に有効な JavaScript 関数の呼び出し、プロパティ、グローバル変数、 またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、 中括弧({})で囲みます。中括弧を表示するには、 バックスラッシュを前に付けます(\{)。

例:

このページの URL は {window.location} で、今日は {new Date()} です。

オブジェクトを選択し、ビヘイビア パネルのビヘイビアを追加メニューから「Set Text」> 「Set Text Of Container」を選択します。
Set Text Of Container ダイアログボックスで、Container メニューを使用してターゲット要素を選択します。
「新規 HTML」テキストボックスに新規テキストまたは HTML を入力します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

Set Text Of Status Bar ビヘイビアの適用

Set Text Of Status Bar ビヘイビアは、ブラウザーウィンドウの左下隅にある ステータスバーにメッセージを表示します。例えば、このビヘイビアを使用して、リンクに関連付けられた URL を表示する代わりに、ステータスバーにリンクの 移動先を説明することができます。訪問者はステータスバーのメッセージを無視したり見落としたりすることが多く (すべてのブラウザーがステータスバーテキストの設定を 完全にサポートしているわけではありません)、メッセージが重要な場合は、 ポップアップメッセージまたは AP 要素のテキストとして 表示することを検討してください。

メモ

Dreamweaver で Set Text Of Status Bar ビヘイビアを 使用する場合、一部のブラウザーではステータスバーテキストを変更する際に 特別な調整が必要なため、ブラウザーのステータスバーの テキストが変更されることは保証されません。例えば、Firefox では、JavaScript がステータス バーテキストを変更できるようにする 詳細オプションを変更する必要があります。詳しくは、ご使用のブラウザーのマニュアルを参照してください。

テキスト内に有効な JavaScript 関数の呼び出し、プロパティ、グローバル変数、 またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、 中括弧({})で囲みます。中括弧を表示するには、 バックスラッシュを前に付けます(\{)。

例:

このページの URL は {window.location} で、今日は {new Date()} です。

オブジェクトを選択し、ビヘイビアパネルの「ビヘイビアを追加」メニューから「Set Text」>「Set Text Of Status Bar」を選択します。
Set Text Of Status Bar ダイアログボックスで、 メッセージボックスにメッセージを入力します。

メッセージは簡潔にします。 メッセージがステータスバーに 収まらない場合、ブラウザーはメッセージを切り捨てます。

「OK」をクリックして、初期設定のイベントが正しいことを確認します。

Set Text Of Text Field ビヘイビアの適用

Set Text Of Text Field ビヘイビアは、 フォームのテキストフィールドのコンテンツを、指定した コンテンツに置き換えます。

テキスト内に有効な JavaScript 関数の呼び出し、 プロパティ、グローバル変数、またはその他の式を埋め込むことができます。JavaScript 式を埋め込むには、中括弧({})で囲みます。 波カッコを表示するには、前にバックスラッシュを付けます(\{)。

例:

このページの URL は {window.location} で、今日は {new Date()} です。

名前の付いたテキストフィールドの作成

挿入 > フォーム > テキストフィールドを選択します。

Dreamweaver でフォームタグを追加するかどうか確認を求められたら、 「はい」をクリックします。

プロパティインスペクターで、テキストフィールドの名前を入力します。 名前がページ内で一意であることを確認してください(同じページ内の複数の要素に、異なるフォーム内にある場合でも、 同じ名前を使用しないでください)。

「テキストフィールドのテキストを設定」の適用

テキストフィールドを選択し、ビヘイビアパネルのビヘイビアを追加メニューから、テキストを設定/ フィールドのテキストを設定を選択します。
テキストフィールドメニューから対象のテキストフィールドを選択し、 新しいテキストを入力します。
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「エレメントの表示 - 非表示」ビヘイビアーの適用

エレメントの表示/非表示ビヘイビアは、1つまたは複数のページ要素の 表示、非表示、またはデフォルトの表示の復元を行います。 このビヘイビアは、ユーザーがページを操作する際に 情報を表示するのに便利です。例えば、ユーザーが植物の画像の上にポインターを移動すると、その植物の生育時期や地域、必要な日照量、どのくらい大きく育つかなどの詳細を示すページ要素を表示できます。このビヘイビアは関連する要素の表示または非表示のみを行い、非表示の際にページのフローから要素を実際に削除することはありません。

オブジェクトを選択し、ビヘイビアパネルのビヘイビアを追加メニューから エレメントの表示/非表示を選択します。

エレメントの表示/非表示が利用できない場合は、 AP 要素を選択している可能性があります。AP 要素は 4.0 ブラウザーの両方でイベントを受け付けないため、 <body> タグやリンク(<a>)タグなど、別のオブジェクトを選択する必要があります。

エレメントリストから、表示または非表示にしたい要素を選択し、 「表示」、「非表示」、または「復元」(デフォルトの表示を復元)を クリックします。
表示を変更したいその他すべての要素について、 手順 2 を繰り返します。(1つのビヘイビアで複数の要素の表示を変更できます。)
「OK」をクリックして、初期設定のイベントが正しいことを確認します。

このビヘイビアは Dreamweaver CS5 で非推奨になりました。

「スワップイメージ」ビヘイビアーの適用

Swap Imageビヘイビアは、<img>タグのsrc属性を変更することで、ある画像を別の画像に入れ替えます。このビヘイビアを使用して、ボタンのロールオーバーやその他の画像効果を作成します(一度に複数の画像をスワップすることも含む)。繰り越し画像を挿入すると、ページに 画像のスワップビヘイビアが自動的に追加されます。

メモ

このビヘイビアは src 属性のみに影響するため、 元の画像と同じ寸法(高さと幅)の画像に スワップする必要があります。そうしないと、スワップされる画像が 元の画像の寸法に合わせて縮小または拡大されます。

また、画像のスワップ復元ビヘイビアもあり、 最後にスワップされた画像セットを以前の ソースファイルに復元します。このビヘイビアは、画像のスワップビヘイビアをオブジェクトにアタッチするたびに自動的に追加されます。画像のスワップをアタッチする際に復元オプションを選択したままにしておけば、画像のスワップ復元ビヘイビアを手動で選択する必要はありません。

「挿入」>「画像」を選択するか、挿入パネルの画像ボタンをクリックして画像を挿入します。
プロパティインスペクターで、左端のテキストボックスに 画像の名前を入力します。

画像に名前を付ける必要はありません。オブジェクトにビヘイビアーを添付すると自動的に名前が付けられます。ただし、すべての画像にあらかじめ名前を付けておくと、画像の入れ替えダイアログボックスで画像を区別しやすくなります。

追加のイメージを挿入するには、手順 1 と 2 を繰り返します。
オブジェクト(通常は入れ替える画像)を選択し、ビヘイビアパネルの「ビヘイビアを追加」メニューから「画像の入れ替え」を選択します。
画像リストから、ソースを変更したい画像を選択します。
[参照]をクリックして新しい画像ファイルを選択するか、「ソースの設定」ボックスに新しい画像のパスとファイル名を入力します。
変更したい追加の画像がある場合は、手順5と6を繰り返します。一度に変更したいすべての画像に対して同じ画像の入れ替えアクションを使用してください。そうしないと、対応する画像の入れ替え復元アクションがすべてを復元しません。
「画像をプリロード」オプションを選択すると、ページの読み込み時に新しい画像がキャッシュされます。

これにより、画像が表示されるタイミングでのダウンロード遅延を防ぐことができます。

「OK」をクリックして、初期設定のイベントが正しいことを確認します。

「検査フォーム」ビヘイビアーの適用

フォームの検証ビヘイビアーは、指定されたテキストフィールドの内容をチェックして、ユーザーが正しいタイプのデータを入力していることを確認します。このビヘイビアーをonBlurイベントで個々のテキストフィールドに添付すると、ユーザーがフォームを記入している間にフィールドを検証できます。また、onSubmitイベントでフォームに添付すると、ユーザーが送信ボタンをクリックしたときに複数のテキストフィールドを一度に評価できます。このビヘイビアーをフォームに添付すると、無効なデータを含むフォームの送信を防ぐことができます。

「挿入」>「フォーム」を選択するか、挿入パネルの「フォーム」ボタンをクリックしてフォームを挿入します。
「挿入」>「フォーム」>「テキストフィールド」を選択するか、挿入パネルの「テキストフィールド」ボタンをクリックしてテキストフィールドを挿入します。

追加のテキストフィールドを挿入するには、この手順を繰り返します。

検査方法を次の中から選択します。
  • ユーザーがフォームを記入している間に個々のフィールドを検証するには、テキストフィールドを選択して「ウィンドウ」>「ビヘイビアー」を選択します。

  • ユーザーがフォームを送信するときに複数のフィールドを検証するには、ドキュメントウィンドウの左下角にあるタグセレクターの<form>タグをクリックして、「ウィンドウ」>「ビヘイビアー」を選択します。

ビヘイビアーの追加メニューで「検査フォーム」を選択します。
次のいずれかの操作を実行します。
  • 個々のフィールドを検証している場合は、フィールドリストからドキュメントウィンドウで選択したのと同じフィールドを選択します。

  • 複数のフィールドを検証している場合は、フィールドリストからテキストフィールドを選択します。

フィールドにデータが必要な場合は、「必須」オプションを選択します。
次の「受諾」オプションのいずれかを選択します。

すべて

必須フィールドにデータが含まれているかチェックします。データはどのタイプでも構いません。

電子メールアドレス

フィールドに @ 記号が含まれているかどうかチェックされます。

数字

フィールドに数字だけが含まれているかどうかチェックされます。

数字の範囲

フィールドに特定の範囲の数値が含まれているかチェックします。

複数のフィールドを検証する場合は、検証したい追加のフィールドについて手順6と7を繰り返します。
「OK」をクリックします。

ユーザーがフォームを送信するときに複数のフィールドを検証している場合、onSubmitイベントがイベントメニューに自動的に表示されます。

個々のフィールドを検証している場合は、デフォルトのイベントがonBlurまたはonChangeであることを確認してください。このいずれかでない場合、いずれかのイベントを選択します。

どちらのイベントも、ユーザーがフィールドから離れるときにフォームの検証ビヘイビアーをトリガーします。違いは、onBlurはユーザーがフィールドに入力したかどうかに関係なく発生し、onChangeはユーザーがフィールドのコンテンツを変更した場合にのみ発生することです。onBlurイベントは、フィールドが必須の場合に推奨されます。