Dreamweaverで複数のイメージを使用してスワップを作成する方法 - より複雑なページを作成する前にダミー

をスワップするすべてのイメージを作成することが重要です。Dreamweaverのスワップイメージビヘイビアを使用してより複雑なページデザインを作成する前に、

スワップイメージの動作を使用する場合は、同じサイズ（高さと幅）を入れ替えるすべてのイメージを作成することが重要ですが、イメージをスワップすると、画像が同じサイズでない場合、最初の画像以外のすべての画像は、ページに挿入された最初の画像が占めるスペースに合わせて伸縮または圧縮されます。

<！ - 1 - >

すべての画像が同じサイズであるように、大きな画像を切り抜く

水平イメージと垂直イメージを、水平イメージごとに2つの垂直イメージを結合することで、デザイン内の同じスペースを占めるようにします。 Photoshopなどのプログラムでは、2つの垂直イメージを同じファイルに並べて挿入し、そのイメージを1つの水平イメージと同じサイズになるようにサイズを変更します。

<！ - 2 - >

最大の画像サイズの画像ファイルを1つ作成し、背景を黒や白などのニュートラルな色に設定し、他のすべての画像をバックグラウンドに挿入してすべて保存できるようにします同じファイルサイズで

スワップイメージ動作を使用するには、次の手順に従ってください。

1最初に表示するすべてのイメージを含むページデザインを作成します。

<！ - 3 - >

ロンドンのタワーブリッジのページデザインの3枚の写真のそれぞれには、サムネイルが1つと大きなものが2つあります。ページが最初にWebブラウザで読み込まれると、3つのサムネイル画像はすべてページの下部に配置され、対応するより大きなバージョンの最初のものがサムネイルのすぐ上のメイン領域に表示されます。

2プロパティインスペクタでイメージに名前を付けます。

JavaScriptを使用してイメージをターゲティングするには、動作がどのように動作するのかをまず各イメージに一意のIDを付けます。イメージIDはイメージファイル名またはテキストタグと同じではありませんが、同じ名前または類似の名前を使用できます。イメージIDにはスペースや特殊文字は使用できません。

3ウィンドウ→動作を選択します。

[ビヘイビア]パネルが開きます。ページ上の別の場所でビヘイビアパネルをドラッグすることができます。ビヘイビアパネルの下部または側面をドラッグして展開できます。パネルの上部にある濃い灰色のバーをクリックして、空き容量を増やすために他の開いているパネルを閉じることもできます。

4画像を選択します。

アクションのトリガーとなるページ内のイメージを選択します。

5スワップイメージの動作を選択します。

ワークスペースでトリガイメージを選択した状態で、ビヘイビアパネルのプラス記号をクリックして、アクションのドロップダウンリストを開き、適用するアクションを選択します。

6 [スワップイメージ]ダイアログボックスでスワップするイメージを指定します。

画像リストで、置き換えられる画像のIDを選択します。 [参照]ボタンをクリックして、メインイメージを置き換えるイメージを選択します。イメージがローカルサイトフォルダにまだ保存されていない場合は、Dreamweaverからコピーされます。

7 [スワップイメージ]ダイアログボックスの下部にある[画像をプレロードする]オプションを選択して、ページがロードされたときにすべてのイメージをキャッシュにロードするようブラウザに指示します。

このオプションを選択しないと、イメージスワップを使用すると遅延が発生することがあります。

8必要に応じて、Restore Images OnMouseOutオプションの選択を解除します。

Restore Images OnMouseOutオプションは、イベントが完了すると（トリガーサムネイルからマウスを移動したときなど）、元のイメージが置き換えられることを意味します。デフォルトでは、イメージのスワップ動作に対してこのオプションがあらかじめ選択されています。別のサムネイルにカーソルを合わせるたびに元のイメージを置き換えるのが気になる場合は、このオプションの選択を解除するとよいでしょう。

9動作のすべての設定を指定したら、[OK]をクリックします。

新しいビヘイビアがビヘイビアパネルに表示されます。

10行動のイベントを指定します。

アクションが適用されたら、元に戻ってアクションをトリガーするイベントを指定できます。デフォルトでは、イメージのスワップアクションを使用するときにOnMouseOverイベントが適用されますが、スワップイメージアクションをトリガするにはイメージをクリックする必要があるOnClickなどの使用可能なイベントにイベントを変更できます。