ホームページビルダー応用編
ビルダーに用意されている素材を利用する
- JavaScriptを利用する
- ビルダーの素材の中に使いたいスクリプトがない
- 素材集のJavaアプレットを利用する
- ダイナミックHTML
- 画像のロールオーバー効果
- 流れる画像や文字(マーキーの利用)
- 流れる画像や文字(V2001以前)
- メッシュ効果とロールオーバー効果の組み合わせ
メッシュ効果とロールオーバー効果の組み合わせ
グラスにマウスを持って行くと「Welcome」の文字が変わります。
![]() |
![]() |
![]() |
![]() |
メッシュ効果と画像のロールオーバー効果を利用しています。
ワイングラスは
さんの素材です
●メッシュ効果とは? (V6以降)
- 一つの画像を指定数に分け、分割した画像に色彩効果を与えることができます。
メッシュ画像を表示できるブラウザは、IE 4.0以降です。
●ロールオーバー効果とは?
- 画像の上にマウス ポインタを置くと別の画像に切り替わり、マウスポインタを画像の外に出すと元の画像に戻る――このような効果を「ロールオーバー効果」とよびます。<ビルダーヘルプより>
表示できるブラウザはIE4.0以降です。
※ビルダーのバージョンにより、挿入されるJavaScriptが違うため古いビルダーのバージョンで作成した「ロールオーバー効果」はNN7では動作しない場合があります。
-
まず、画像のメッシュ効果を作成します。
メッシュ効果を適用する画像をフォーカス枠にして、挿入→画像の効果→メッシュ効果
メッシュ効果ウィザードが開始されるので画面の指示に従って進めてください。
(ここで使用している画像は3分割にしています。) -
メッシュ効果を適用すると画像が分割され、それぞれに色彩効果のかかった画像をビルダーが作成します。
そしてマウスポインタが置かれたとき色彩効果のかかった画像へ切り替わるように設定されます。 -
次に、画像のロールオーバー効果ウィザードの中にある「他の場所の効果」を利用します。
「他の場所の効果」を利用する場合は、事前にマウスポインタが置かれたとき切り替わる画像を用意しておく必要があります -
分割された画像をフォーカス枠にして、右クリック→属性の変更。
属性の変更では「画像のロールオーバー効果」の属性が表示されるので、リンク設定を行いたい場合は「その他」のタブをクリックし設定します。
上のサンプルの様にロールオーバー効果を利用し、他の画像を変更したい場合は、「他の場所の効果」タブをクリックし、画像の追加を行います。設定の方法は画面上の指示に従って進めてください。



