マウス ポインタを合わせた時に、画像の色や模様が変わるようにしたい場合は、ロールオーバー効果を使うことによって可能です。この効果はウェブアート デザイナーとホームページ・ビルダー両方の画面で作成できます。
I ウェブアート デザイナーでロールオーバー画像を作成する
ウェブアート デザイナーには、いくつかのロールオーバー用の素材が用意されています。サンプルのロールオーバーをキャンバスにドラッグすると「ロールオーバー作成」の画面が表示されますので、そこで画像を選択して保存することが可能です。
II ホームページ・ビルダーでロールオーバー効果をかける
ホームページ・ビルダーは、１つの画像に効果をかけるのか、２つの画像を入れ替えるのかの選択ができます。
ここでは１つの画像に効果をかける方法をご紹介します。
▼注意
- 効果をかけたい画像がアニメーション GIF の場合は、効果を設定することができません。
- ロールオーバー効果は Web ブラウザの種類やバージョンによっては表示できない場合があります。
■操作
【かんたんスタイルの場合】
- ロールオーバー画像を挿入したいページを開きます。
- ナビメニューから「写真や画像の挿入」→「ロールオーバー効果」を選択します。
「画像のロールオーバー効果ウィザード (通常時の画像の指定)」ダイアログが表示されます。
- 通常時の画像を選択します。パソコン内のファイルを選択するには [参照] ボタンを、素材集から選択するには [素材集から] ボタンをクリックします。
「開く」（または「素材集から開く」) ダイアログが表示されます。
- 使いたい画像を選んで [開く] ボタンをクリックします。
- [プレビュー] に選択した画像が表示されていることを確認し、[次へ] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (マウス ポインタが上に来たときの画像の指定)」ダイアログが表示されます。
- マウス ポインタが上に来たときの画像を指定します。ここでは [通常時の画像に効果を加えたものを使用する] を選択し、[効果の選択] ボタンをクリックします。
「効果の選択」ダイアログが表示されます。
- 画像に加えたい効果を選択し、[OK] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (マウス ポインタが上に来たときの画像の指定)」ダイアログに戻ります。
- [マウスでロールオーバー効果の確認] で効果を確認し、[次へ] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (その他の設定)」ダイアログが表示されます。
- ロールオーバー画像にリンクを設定する場合は「リンクの指定」でファイルや URL を指定します。［ターゲットの指定］でターゲットを指定することもできます。
- [画像の入れ替え] を再度確認し、[次へ] ボタンをクリックします。
※通常時の画像と入れ替えたい場合はここで入れ替えできます。
「画像のロールオーバー効果ウィザード (他の場所の画像の交換)」ダイアログが表示されます。
- [完了] ボタンをクリックします。
- ページを上書き保存し、プレビュー画面で動作を確認します。
【スタンダード／エディターズスタイルの場合】
- ロールオーバー画像を挿入したいページを開きます。
- メニューバーから「挿入」→「画像の効果」→「ロールオーバー効果」を選択します。
「画像のロールオーバー効果ウィザード (通常時の画像の指定)」ダイアログが表示されます。
- 通常時の画像を選択します。パソコン内のファイルを選択するには [参照] ボタンを、素材集から選択するには [素材集から] ボタンをクリックします。
「開く」（または「素材集から開く」) ダイアログが表示されます。
- 使いたい画像を選んで [開く] ボタンをクリックします。
- [プレビュー] に選択した画像が表示されていることを確認し、[次へ] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (マウス ポインタが上に来たときの画像の指定)」ダイアログが表示されます。
- マウス ポインタが上に来たときの画像を指定します。ここでは [通常時の画像に効果を加えたものを使用する] を選択し、[効果の選択] ボタンをクリックします。
「効果の選択」ダイアログが表示されます。
- 画像に加えたい効果を選択し、[OK] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (マウス ポインタが上に来たときの画像の指定)」ダイアログに戻ります。
- [マウスでロールオーバー効果の確認] で効果を確認し、[次へ] ボタンをクリックします。
「画像のロールオーバー効果ウィザード (その他の設定)」ダイアログが表示されます。
- ロールオーバー画像にリンクを設定する場合は「リンクの指定」でファイルや URL を指定します。［ターゲットの指定］でターゲットを指定することもできます。
- [画像の入れ替え] を再度確認し、[次へ] ボタンをクリックします。（通常時の画像と入れ替えたい場合はここで入れ替えできます）
「画像のロールオーバー効果ウィザード (他の場所の画像の交換)」ダイアログが表示されます。
- [完了] ボタンをクリックします。
- ページを上書き保存し、プレビュー画面で動作を確認します。
III 関連情報
■関連情報
→他のソフトウェアで作成した画像のロールオーバー効果を編集したい
→ロールオーバー効果が加えられた画像を使用して、他の場所の画像にロールオーバー効果を加える方法について
→ロールオーバー効果の画像に別フレームへのリンクを挿入したい
→ロールオーバー効果を設定した画像に代替テキストを指定したい