Dreamweaver 4 の簡潔なチュートリアル (8. Web ページにインタラクティブな効果を追加する)

著者：Eve Cole 更新時間：2009-05-30 18:35:37

8. Web ページにインタラクティブな効果を追加する

シンプルなインタラクティブなエフェクトを作成する

マウスを画像の上に移動すると、元の画像が切り替わり、マウスを離すと元の画像に戻るという現象がよく見られます。冒頭で、Frontpage に対する Dreamweaver の利点の 1 つは、Dreamweaver がインタラクティブな Web ページを作成できることであると述べました。次に、Dreamweaver を使用して、最も単純なインタラクティブな効果である画像の変更を作成します。

同じサイズの 2 つの画像を用意します。1 つはマウスを上に移動させる前の画像、もう 1 つはマウスを上に移動させた後の画像です。たとえば、次の 2 つの画像では、左の画像は盛り上がったボタン、右の画像はマウスを上に移動した後の画像です。写真は凹型ボタンです。

「オブジェクト」パネルをクリックします

をクリックすると、次のダイアログボックスが表示されます。

①画像名: 変換された画像エフェクトのタグ名。Dreamweaver によって自動的に割り当てられます。

②元画像：元画像を指定します（例：これは盛り上がった画像です）

③ロールオーバー画像: マウスを上に移動した後の画像を指定します (たとえば、ここでは凹面画像)。

④ URL: 画像のリンク URL。

たとえば、上記のように設定を完了した後、[OK] を押し、次に F12 を押して効果をプレビューします。