ホームページビルダー応用編
イベントの設定を利用する
- ボタンをクリックすると背景色が変わる(別ウィンドウで開きます)
- メッセージボックスに文字を表示する
- ステータス行に文字を表示する
- クリックすると画像が変更
- マウスポインタが上に乗った時だけ表示される画像や文字(絶対位置)
- マウスポインタが上に乗った時だけ表示される画像や文字(相対位置)
- マウスポインタが上に乗った時だけ表示される画像や文字(フレーム版)
- マウスポインタが上に乗った時だけ表示される画像(ロールオーバーとメッシュ効果を利用する)
メッセージボックスに文字を表示する
- 挿入→フォームと入力部品→プッシュボタン→一般ボタン
- プッシュボタンの属性画面より、ボタンに表示する名前を入力し、イベントボタンをクリック→イベント<OnClic>を選択
- 右のアクション設定の画面でメッセージボックスを選択。ダブルクリック
- <メッセージボックスを表示します>をダブルクリック
- パラメーターの指定ウィンドが開くのでメッセージ文字を入力してOK
Sampleのように、何度も繰り返す時はパラメーターの指定後、イベントの設定画面で登録を選択すると続けて入力できます。
ステータス行に文字を表示
ステータス行に文字をスクロールしながら表示させるスクリプトは素材ビューの中に含まれています。
挿入したいスクリプトを選択して<挿入>をクリックすればOKです。
文字を変更したり、メッセージの表示方法を変更したい場合は、標準画面にあらわれる {S} マークをフォーカス枠にして、右クリック→属性の変更。
●メッセージボックスを作った時のようにイベントの設定からも作れます。
例えばこんな感じ (クリックでメッセージ表示を開始し、ダブルクリックで表示を止めます)
<Sample・・・ここをクリックしてね>
- メッセージボックス設定方法1.と同じ作業をする。
- メッセージボックス設定方法2.と同じ作業をする。
- 右のアクション設定の画面でステータス行を選択。ダブルクリック
- <ステータス行に一文字ずつメッセージを表示します。>を選択
- パラメーターの指定ウィンドが開くのでメッセージ文字を入力してOK。(文字の表示スピードは表示間隔で設定できます。)
- イベントの設定画面に戻ったら続けて<登録>を選択。
- 今度はイベント<OnDblClic>を選択
- アクション設定→ステータス行→<ステータス行に一文字ずつメッセージを表示するのを止めます>を選択→OK
クリックすると画像が変身
Sample・・・
<画像をクリックしてください。>
設定方法
- 最初に表示される画像に<NAME>をつけます。
<NAME>の付け方・・・・画像を選択し、メニューバーより 編集→属性の変更→その他→<NAME>の欄に半角英数で名前をつけます。 - クリックさせる文字又は画像を選択する。(リンクをはる要領と一緒)
- メニューバーより 編集→イベントの設定→イベント<OnClic>を選択
- 右のアクション設定の画面で「画像」を選択。ダブルクリック
- <画像を入れ替えます>または、(画像をスワップします)を選択。ダブルクリック
- パラメーター選択の画面で<入れ替えられるNAMEの属性>に<1.>でつけた名前を選択する
- <入れ替える画像のファイル名>にクリックしたとき表示したい画像を<参照>により選択。OK
マウスポインタが上に来たときだけ表示される画像や文字(絶対位置)
++ Sample
こんな感じで表示されます
- まずレイアウト枠を作成し、その中にポインタを置いたときに表示させたい画像や文字を入力します。
- レイアウト枠で注意することは、IDに名前が付いていることを確認してください。
- 次にエフェクトで(エフェクトなし)→パターンを非表示に指定します。
- 今度はイベントの設定をします。
イベントを起こさせたい画像、又は文字をターゲット(ドラッグ又はフォーカス枠)にして メニューバーより 編集→イベントの設定→<OnMouseOver>を選択→
アクション設定画面でオブジェクトを選択。ダブルクリック→<オブジェクトを表示します。>を選択ダブルクリック→
パラメーター画面でオブジェクトのIDを<2.>でつけた名前を指定→OK→イベントの設定画面で登録を選択。 - 次にマウスポインタが出ていったときの表示方法を指定します。
<OnMouseOut>を選択→<4.>の作業と同じですが、今度は<オブジェクトを非表示にします。>を選択。後は同じ作業です。
2つのイベントの設定ができたらOK。
*注意* この設定はフォーカス枠(ピンクや水色で囲まれる枠)に適用されます。例えば、一行中の何文字分のみ適用させたいと思ってもフォーカス枠が一行分あればその行に対し、イベントが働きます。
特定の文字にイベントを設定させたい場合は、イベントを起こさせるものを画像にするか表中に治めるまたは、DIVタグ内に文字を治めるという方法があります
マウスポインタが上に来たときだけ表示される画像や文字(相対位置)
※この方法はHTMLソースでの操作が必要になります。
例・・・・
レイヤー1内に「ここにマウスポインタを乗せてね」の文字。
レイヤー2内に「こんな感じで表示されます」の文字。
レイヤー1にマウスポインタが乗ったとき、レイヤー2を表示する。
- マウスポインタが上に来たときだけ表示される画像や文字(絶対位置)を参考にレイアウト枠の挿入とイベントの設定を行う
- HTMLソースを開き、レイアウト枠部分のソースを切り取り、表示させたいところへソースを移動する
(レイアウト枠はBODYタグのすぐ後ろに挿入される場合があります。その場合にこの操作を行ってください。表示させたいところにレイアウト枠のソースが挿入されている場合は、この操作は不要です。)
(V7では、オプションからレイアウト枠ソースの挿入箇所を指定することができます。ツール→オプション→編集→<「標準モード」でレイアウト枠挿入時にカーソル位置に挿入する>にチェックを入れる) - レイヤー1とレイヤー2の順番が違っていれば、ソースを入れ替える。
ここまでの操作では、ページ編集画面やプレビューで確認しても何も変わりません。
===============
※ここまでのHTMLソースの様子
<div style="width : 100px;height : 100px;top : 50px;left : 50px;
position : absolute;
z-index : 1;
visibility : visible;
" id="Layer1" onmouseover="_HpbShowObj('Layer2');" onmouseout="_HpbHideObj('Layer2');">ここにマウスポインタを乗せてね</div>
<div style="width : 100px;height : 100px;top : 51px;left : 194px;
position : absolute;
z-index : 2;
visibility : hidden;
" id="Layer2">こんな感じで表示されます</div> - 位置指定に関するタグを削除していきます。(例・・・上記ソース)
top : 50px;left : 50px;
top : 51px;left : 194px;
position : absolute;(2箇所)
重ね合わせも今回必要ないので削除します。
z-index : 1;
z-index : 2; - 編集画面で確認すると、レイアウト枠の表示がなくなり、縦に並んでいます。
レイヤー2が横に表示されるようにするには、テーブルを使って配置するか、回り込みを設定します。
ここでは、「回り込み」を設定してみます。 - レイヤー1をフォーカス枠にして、右クリック→スタイルの設定→ID「Layer1」編集(3)→位置→回り込み「左」
※4番の操作で、id="Layer1"のタグも削除した場合は、編集(4)からスタイルを設定することができます。
マウスポインタが上に来たときだけ表示される画像や文字(フレーム版)
マウスポインタが上に来たときだけ表示される画像や文字(ロールオーバーとメッシュ効果を利用する)
ビルダーに用意されている素材を利用する >> ロールオーバー効果とメッシュ効果の組み合わせ