ポップアップメッセージの実験（その３）

下の行の「ここ」をマウスポインタでポイントしてください。（赤い文字です。）
ここをポイントするとメッセージをポップアップします。
表示位置はこの辺りです。
ポップアップメッセージを消すには、赤文字の「ここ」からマウスポインタを移動してください。

マウスオーバーで表示されたメッセージを自動的に消すように修正しました。
ポップアップメッセージを消すには、hideメソッドを実行します。しかし、ポップアップウィンドウのオブジェクトはshowPopup()関数内のみに有効なローカル変数として作成されています。このままでは外部（Aタグ）からhideメソッドを実行できません。
このオブジェクト変数を関数外に出して（グローバルにして）、関数の外からオブジェクトを操作できるようにしなければなりません。
修正したスクリプトは以下のとおりです。

<script language="JavaScript"><!--
var popup = window.createPopup();

function showPopup() {
  popup.document.body.style.border = "solid 1px";
  popup.document.body.innerHTML = "ポップアップしました！";
  popup.show(35, 50, 160, 20, document.body);
}
// --></script>

マウスアウト時にhideメソッドを実行してポップアップメッセージを消去しましょう。
以下のように組み込みます。

<a herf="#" onMouseover="showPopup();" onMouseout="popup.hide()"><font color=red>ここ</font></a>をポイントするとメッセージをポップアップします。

好みの問題ですが、これでマウスの動きだけでメッセージをON/OFFできるようになりました。

現在の状態では、ポップアップメッセージの表示位置は固定されています。いちいちポップアップする位置を指定するのは面倒です。
（その４）では、イベント発生時のマウスポインタの位置を取得して、その付近に自動的にポップアップさせることを試みます。

＜-- （その２）へ戻る　：　（その４）へ進む --＞

ポップアップメッセージの実験トップへ戻る

Last update: