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

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

ポップアップメッセージの表示位置をマウスポインタの近くに表示するようにshowPopup関数を修正しました。
マウスオーバーイベントが発生した時のマウスポインタの位置は、event.xとevent.yで取得できます。
ポップアップメッセージを表示する位置は、event.xあるいはevent.yで取得したポインタ位置から少しずらして表示するようにします。
スクリプトは以下のとおりです。 
<script language="JavaScript"><!--
var popup = window.createPopup();

function showPopup() {
  popup.document.body.style.border = "solid 1px";
  popup.document.body.innerHTML = "ポップアップしました！";
  popup.show(event.x - 50, event.y + 20, 160, 20, document.body);
}
// --></script>
これでポップアップメッセージは、自動的にイベント発生時のマウスポインタの近くに表示されるようになりました。

これで、showPopup関数も使いやすくなりました。まとめとしてさらに改善してみました。（その５）に進んでください。

＜-- （その３）へ戻る 　：　 （その５）へ進む --＞

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

Last update: