Adob​​e Dreamweaver CS6でロールオーバーを作成する方法 - Adob​​e Dreamweaver CS6でダミー

Adob​​e Dreamweaver CS6では、イメージプレースホルダ、ロールオーバー イメージ（ビューアをロールしたときに変化するイメージ画像上のマウス）、ナビゲーションバー、およびFireworks HTML。これらのイメージオブジェクトには、「挿入」→「イメージオブジェクト」を選択してアクセスします。 ロールオーバーイメージを作成するには、次の手順に従います。1ロールオーバーとして使用するイメージを作成します。

これらのイメージは、Fireworks、Illustrator、Photoshop、またはWeb用に最適化されたイメージを保存できる他のアプリケーションで生成できます。最良の結果を得るには、正確に同じ幅と高さの画像を作成します。

<！ - 1 - >

2ロールオーバーを表示する場所にカーソルを置き、[挿入]→[イメージオブジェクト]→[ロールオーバーイメージ]を選択するか、[挿入]パネルの[ロールオーバーイメージ]ボタンをクリックします。

[ロールオーバーイメージの挿入]ダイアログボックスが表示されます。

3 [画像名]テキストフィールドに空白のない画像名を入力します。

この名前は、ロールオーバーを作成するスクリプトで使用されます。

<！ - 2 - >

4 [オリジナルイメージ]および[ロールオーバーイメージ]テキストフィールドの右側にある[参照]ボタンをクリックして、ページにデフォルトとして表示するイメージを探します。

画像は、マウスポインタを画像上に置いたときにのみ表示されます。

5 [Preload Rollover Image]チェックボックスを選択したままにします。

<！ - 3 - >

このオプションは、ロールオーバーの遅延を避けるために、ページがダウンロードされたときにロールオーバーイメージをダウンロードします。

6適切な説明文を入力します。

もちろん、Altのテキストフィールドに入力します。

7「クリックされたとき、URLに移動」テキストフィールドで、ロールオーバーイメージをクリックしたときに視聴者を誘導する場所をDreamweaverに通知します。

[参照]ボタンをクリックすると、サイト内の別のページを見つけるか、URLを入力することができます。

別のWebサイトにリンクしている場合は、URLの先頭にhttp：//という接頭辞を含める必要があります。このフィールドを空白のままにすると、自動的に無効なリンク（#）が追加されます。

8 [OK]をクリックします。

ロールオーバー画像がページ上に作成されます。

9新しいロールオーバーイメージをプレビューするには、ファイル→ブラウザでプレビューを選択するか、ドキュメントツールバーのライブビューボタンをクリックします。

ボタンまたはハイパーリンクに使用する実際のリンクがまだない場合は、シャープ記号（#）を入力して無効なリンクを作成できます。リンクまたはボタンはクリック可能に見えますが、クリックするとどこにも移動しません。このオプションは、スペースバーを押して空のスペースをリンクとして作成するよりも優れています。そのスペースをクリックすると、そのリンクにページが見つかりませんというエラーが表示されるためです。