▲ジモティーズトップへ
ウエッブアートデザイナーを使ったロールオーバーボタンの制作

ホームページのボタンによく使われている手法の中にロールオーバーボタンというものがあります。これはマウスカーソルがボタン上にのるとボタンの形状や形が変化するというものです。
通常javascriptを使った手法ですが、ホームページビルダー&ウッブアートデザイナーではマウス操作だけで簡単にロールオーバーの効果を制作できます。

ロールオーバーボタンのサンプル


1.ウエッブアートデザイナーを起動して左目ニューのタブで「ウエッブアート素材」→「ロールオーバー」と選択します。


2.素材の中からめぼしい素材を選択すると「ロールオーバーの作成」ダイアログが自動的に立ち上がるので、のみを選択し「ロールオーバー作成」ダイアログの「通常時の画像」の部分の「登録(E)」ボタンを押し登録します。

さらにのみを選択し「マウスポインタが上に来たときの画像」に登録し「ロールオーバー保存(S)」をクリックします。


3.「ロールオーバー作成ウィザード(位置の設定−1/3)」の画面で位置を設定し次へを押します。
(通常何もしなくて結構です。)


4.「ロールオーバー作成ウィザード(保存形式の選択−2/3)」でGIFを選択し次へを押します。



5.「ロールオーバー作成ウィザード(保存方法の設定−3/3)」で「ホームページビルダーに貼り付けを選び完了を押します。



6.下のようなボタンがホームページビルダーの編集ページ内に貼り付けられました。


次に今できた画像をクリックして、更に右クリックしメニューより「属性の変更」を選択します。
すると下のようなダイアログが表示されますので「その他」タブをクリックして「リンクの指定」
より、クリックしたときのリンクを設定し「OK」ボタンを押します。









    

 Copyright(C) 2001 備中高梁観光案内所