ロールオーバーというのはマウスをあてると画像が変化する仕掛けのことです。
動きがでるのでたのしいページに仕上がります。
1.素材から
1）ウェブアートデザイナーの起動
まずはウェブアートデザイナーを起動します。素材ビューのウェブアート
素材からロールオーバーを選びます。今回はつばのある帽子の下に文字が
隠れていて、マウスをあてると帽子が持ち上がって下の文字が見える素材を
使ってみます。文字という窓に滝道についてと入れて、roll330を選んで
素材ビューの右下の挿入ボタンを押すとロールオーバー作成という窓が
出てきます。
2）画像の指定
キャンパスには帽子がふたつあって、両方を囲むようにハンドルがあります。
一旦白いところをクリックして選択を解除し、マウスを上の帽子だけ囲む
ようにドラッグします。上の帽子だけが選択されました。通常時の画像と
いうところの登録ボタンをおします。次に下の帽子を選択して、マウス
ポインタが上にきたときの画像の登録ボタンをおします。
3)ファイルの保存
左右の画像は文字が帽子に隠れていて、真ん中の画像だけが文字がみえて
いる状態で確認できたら、ロールオーバー保存ボタンをおします。
ウィザードがでてくるので、次へボタンで進み、ファイルの保存方法を
選ぶ画面では真ん中のファイルに保存を選びます。
名前はaboutとしておきます。about m image.gif と about n image.gif の
ふたつの画像ができました。
4)ビルダーへ挿入
ホームページビルダーでリストのページをひらいてください。
公園についての前にカーソルを置いて、挿入から画像のロールオーバー効果を選びます。
通常の画像を聞いてきますから、参照ボタンから先ほどのabout n image.gifを
してして、次へボタンで、マウスポインタが上に来たときの画像を指定画面では
ファイル名を指定するで、about m image.gifを選びます。次へでリンクページ
を指定します。今回はabout.htmですね。ターゲットの指定はmainです。
5)確認
完了するとロールオーバー効果は設定できましたから、プレビューで確認して
おきましょう。すべてのボタンを作成して出来上がったページはこちらです。
2.画像を組み合わせて
1)色調補正
もともとのボタンの色調を少し変化させて、作成してみます。
botans.gifというのがおはじきのような形のグリーンのお花です。
これをウェブアートデザイナーで開いてクリックして選択します。
表示、ツールバーからイメージツールバーをだします。
左から４つ目の色調補正ボタンを押して、赤のボタンをおします。
赤いお花ができましたのでこれをbotansr.gifとして保存します。
2)ページに挿入
もともとの画像を標準時の画像に指定し、新しく作成したボタンを
マウスが上に来た時の画像にして、ビルダーに差し込みます。
出来上がりはこちらです。
3)別の画像で
たとえば通常は葉っぱにしておいて、マウスが乗るとお花に変化したり、
つぼみの画像が開いたお花に変わったりするのもたのしいですね。
出来上がりはこちらです。
3.１枚の画像から
1)画像の作成
この講座６回目のアニメジフのところで１枚の画像からアニメジフを
作成しました。その応用として１枚の画像からロールオーバー効果を
設定してみます。ウェブアアートデザイナーからウェブアート素材のbtn300fを
選びました。文字はロールオーバーのroll330のBackの文字をダブルクリック
してトップページへと変更して、先ほどのTOPICの文字のところにいれます。
余分な画像を消したら、編集からキャンバスの設定で150ピクセル×８０ピクセル
程度に小さくしてから、botantと名前をつけてgif形式で保存します。
2)ロールオーバー効果を作成
ビルダーでリスト3を開きます。 画像を選択した状態で、
挿入から画像のロールオーバー効果を選びます。
次へボタンから効果の選択ボタンを押してエンボス効果をえらんでみました。
リンク先ページはmain.htm、ターゲットはmainで、ファイルから名前を
つけて保存でlist.htmにします。出来上がりはこちらです。
次回はビルダー講座最終回、クリカブルマップの作成です。
=========================== ご質問コーナー =======================
冬になってからどうもパソコンの調子がよくないのだがとおっしゃる方が
おられました。なるほどワードをつかっている途中でぶちっと切れたり、
何もしていないのに、ウインドウズを立ち上げるとスキャンがはじまったりとか。
まず、接続されている周辺機器をすべて取り外してみました。コンセントを
はずすと、おなじところに暖房機が差し込まれていました。暖房機の
スイッチを切ってパソコンの操作をするととても順調でした。
そういえば私も以前足温器を同じコンセントからとっていて調子がわるかった
ことがありました。心当たりの方は一度お試しください。
戻る 次へ 講座トップ