www.wanichan.com

マウスに触れるとテキストボックスに文字を表示させるには

はじめに

以下がサンプルです。ワニchan、アリchanにふれてみてください。

antwanichan

テキストボックスを挿入する前に、ページのオプションで「フォームフィールドをフォーム内に自動的に埋め込む」のチェックを外しておいてください。
ページのオプション

FrontPageの操作方法

テキストボックスを作っておきます。
[挿入]→[フォーム]→[テキストボックス]をクリックします。

テキストボックスの幅を調整します。マウスで適当な幅に調整しておいてください。

まず、アリchanを選択して、[書式]→[ビヘイビア]をクリックします。

[ビヘイビア]作業ウィンドウより[挿入]ボタンをクリックして、
一覧から[テキストの設定]→[テキストフィールドへのテキストの設定]をクリックします。
テキストフィールドへのテキストの設定をクリック

テキストフィールドへのテキストの設定ダイアログボックスが表示されます。
そこにメッセージを入力してOKボタンをクリックします。
テキストフィールドへのテキストの設定をクリック

ビヘイビアのイベントを以下の図のように「onmouseover」に設定します。
onmouseoverに設定した後の画面

さらに、マウスから離れたときにメッセージを消すようにします。
[ビヘイビア]作業ウィンドウより[挿入]ボタンをクリックして、
一覧から[テキストの設定]→[テキストフィールドへのテキストの設定]をクリックします。

ステータスバーテキストの設定のメッセージは半角スペースを入れてOKボタンをクリックします。
テキストフィールドへのテキストの設定

2行目が空のメッセージの設定になります。
※どちらが空のメッセージテキストが設定されているかはイベント部分をダブルクリックして確認しておいてください。
このようにイベントを「onmouseout」に設定しなおします。
onmoseoutに変更
もう一方のイベントは「onmouseover」に設定されているかどうか確認してください。
もしそれ以外であれば、「onmouseover」に設定してください。

ワニchanに触れると表示するメッセージを設定するには、ワニchanを選択して、[ビヘイビア]作業ウィンドウより[挿入]ボタンをクリックし 、
一覧から[テキストの設定]→[テキストフィールドへのテキストの設定]をクリックします。

テキストフィールドへのテキストの設定は以下の通りです。
テキストフィールドへのテキストの設定に新しいテキストを入力

以下同様に、以上のメッセージのイベントは「onmouseover」に、あとマウスから離れたときに非表示にするため、イベントを追加して空白スペースだけのメッセージを「onmouseout」イベントとして設定します。

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

2012年12月21日(日本時間)をもって、Expression Web 4はフリーソフトになりました。FrontPageユーザーの方もダウンロードして使ってみてください。 なお、Expression Web 4すでに購入された方も、問題が修正された無料版にアップグレードすることをお勧めします。

* Expression Web 4 無料版をダウンロード

▲このページのトップへ