Dreamweaverでゴォ!

画像を使ったロールオーバーの作り方

マウスカーソルが文字や画像の上に重なると、色や画像が変化する機能を「ロールオーバー」といいます。

ロールオーバーは、Javascript等を使い作成しますが、Dreamweaverでは挿入パネル、もしくは「ビヘイビア」ウィンドウから作成できます。

ここでは、画像を使ったロールオーバーの作り方を説明します。

ロールオーバーに使う画像は2つ、それぞれFireworksなどの画像作成ソフトであらかじめ作成しておきます。

挿入ウィンドウを使って作成する方法

この方法でロールオーバーを作成する場合、ロールオーバーしたい画像は新規に作成します。

  1. 挿入ウィンドウの「画像」の項目から「ロールオーバーイメージ」を選択します。もしくは、メニュー 「挿入」 > 「イメージオブジェクト」 > 「ロールオーバーイメージ」を選択します。

  1. 「ロールオーバーイメージの挿入」ウィンドウが表示されます。以下の項目を入力します。
  • イメージ名:アルファベットの英数字で任意の名前を入力します。
  • 元イメージ:最初ページが読み込まれたときに表示される画像を選択します。
  • ロールオーバーイメージ:マウスが重なったときの画像を選択します。
  • 代替テキスト:画像が表示されないときの表示されるテキストを入力します。
  • クリック時にURLへ移動:クリックされたときのリンク先のファイルを指定します。

  1. 以上の手順で、OKをクリックすると以下のようなロールオーバーが完成します。ブラウザをプレビューして確認してください。

ボタン

ビヘイビアから画像を使ったロールオーバーを作成する

  1. 画像を挿入します。
  2. 挿入した画像を選択し、プロパティウィンドウの以下の部分にイメージ名を記述します。イメージ名は半角英数字で記述してください。

  1. 「ウィンドウ」>「ビヘイビア」を選択し、「ビヘイビア」ウィンドウを開きます。

  1. 画像を選択し、「ビヘイビア」ウィンドウの「+」をクリックし、一覧の中から「スワップイメージ」を選択します。

  1. 「スワップイメージ」ウィンドウが表示されるので、「ソースの選択:」ボタにマウスが重なったときの画像を選択して挿入します。その際、チェックマークはそのままにしておきます。

  1. 以上の手順で、OKをクリックすると以下のようなロールオーバーが完成します。ブラウザをプレビューして確認してください。

ボタン

なお、どちらの方法でもWindows XPではアラートボックスが表示され、正しく動作しない場合がありますので、注意してください。

Dreamweaver CS3の使い方 目次にもどる

このページの上へ
Dreamweaverでゴォ! 制作著作/ノンピリオド:村山秀明