ビデオ: eラーニング Adobe Dreamweaver CS3デモ〝テンプレート機能〟 2024
Dreamweaverでは、誰かが画像上にカーソルを置いたときに反応するように設計されています。その効果は、犬の絵がライオンの絵に置き換えられているのと同じくらい劇的であるか、またはあるイメージが別のイメージに置き換わるときに変化する単語の色ほど微妙なものになります。いずれにしても、Dreamweaverにはロールオーバー用の特別なダイアログボックスがあり、適用する最も簡単な動作の1つである単純なロールオーバーエフェクトを作成できます。
<! - 1 - >Dreamweaverの[イメージのロールオーバーを挿入]ダイアログボックスを使用してロールオーバーイメージを作成するには、次の手順を実行します。
クリックすると、ロールオーバを表示するページにカーソルを置きます。
ロールオーバーエフェクトには、少なくとも2つのイメージが必要です.1つは初期状態用で、もう1つはロールオーバー状態用です。 2つの異なるイメージを使用することも、2つのイメージを使用することもできますが、どちらも同じ次元にする必要があります。それ以外の場合は、両方のイメージをページの同じスペースに正確に表示する必要があるため、奇妙なスケーリング効果が発生します。
<! - 2 - >2。 [挿入] - > [イメージオブジェクト] - > [ロールオーバーイメージ]を選択します。
[ロールオーバーイメージの挿入]ダイアログボックスが表示されます。 3。 [イメージ名]ボックスに、イメージの名前を付けます。
ビヘイビアをイメージなどの要素に適用する前に、ビヘイビアスクリプトがその要素を参照できるように、その要素に名前が必要です。スペースや特殊文字を使用しない限り、好きな要素に名前を付けることができます。 4。 [元のイメージ]ボックスに、表示する最初のイメージを指定します。 [参照]ボタンを使用してイメージを検索し、選択します。
<! - 3 - >
画像がサイトのルートフォルダにない場合、ロールオーバーを作成するとDreamweaverはそれらの画像をサイトにコピーします。 5。 [ロールオーバーイメージ]ボックスに、訪問者が最初のイメージ上にカーソルを移動したときに表示されるイメージを入力します。
ここでも、[参照]ボタンを使用して画像を探して選択することができます。 6。ページの最初の読み込み時にすべてのロールオーバーイメージをブラウザのキャッシュに読み込むには、[プレロードロールオーバーイメージ]チェックボックスをオンにします。この手順を実行しないと、マウスが元の画像にロールオーバーされるまで、2番目の画像はダウンロードされないため、訪問者に遅延が発生する可能性があります。 7。 [クリックしたときにURLに移動]ボックスで、任意のWebアドレスを入力するか、参照してリンク先のサイト内の別のページを探します。
URLを指定しない場合、#記号がプレースホルダとして自動的に挿入されます。 8。 [OK]をクリックします。
画像はロールオーバーとして自動的に設定されます。 9。ワークスペースの上部にある地球のアイコンをクリックして、ブラウザで作業をプレビューし、ロールオーバーの動作をテストします。