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

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

HTMLによるマニュアル製作では、一つのページに複数のキーワードが存在します。そのような場合でも使用できるようにshowPopup関数を修正しました。

まず、メッセージをshowPopup関数の引数として与えられるようにします。
メッセージの文字数によってポップアップウィンドウの大きさも変更できたら便利です。引数で指定できるようにしましょう。
また、ポップアップウィンドウ固有の設定は、関数の外に出してあります。（いくらか表示が軽くなる？？？）
ポップアップウィンドウのバックグラウンドカラーやパディングなどのプロパティも設定しました。
フォントも小さめ（size=2）にFONTタグで設定しました。

このようにしてポップアップメッセージを汎用的に使用できる関数が完成しました。これで、説明書の語句のポップアップ説明に使用できます。
スクリプトは以下のとおりです。

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

popup.document.body.style.backgroundColor = "#ccffff";
popup.document.body.style.border = "solid black 1px";
popup.document.body.style.padding = "3";

function showPopup(str, p_width, p_height) {
  str = "<font size='2'>" + str + "</font>";
  popup.document.body.innerHTML = str;
  popup.show(event.x - 50, event.y + 15, p_width, p_height, document.body);
}
// --></script>

＜-- （その４）へ戻る　：　（おまけ）へ進む --＞

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

Last update: