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

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

他にも同様のポップアップメッセージ機能を実現できますが、window.createPopup()で簡単にメッセージをポップアップする機能を作成できます。通常のwindow.open()で開くウィンドウと異なりタイトルバーやツールバーなどがありませんので、メッセージを表示するだけの簡単なヘルプに使用できます。
デフォルトではバックグラウンドカラーは白で、ウィンドウ枠がありませんので、非常に見難いウィンドウですが、styleプロパティである程度の見栄えを加えることもできます。
デフォルトのポップアップメッセージのスクリプトは以下のとおりです。
（HEADタグ内に記述します。）

<script language="JavaScript"><!--
function showPopup() {
  var popup = window.createPopup();
  popup.document.body.innerHTML = "ポップアップしました！";
  popup.show(35, 50, 160, 20, document.body);
}
// --></script>

上記のポップアップメッセージをマウスオーバーで表示できるようにするには・・・

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

・・・のようにBODYタグ内に、Aタグで記述してあります。（他の方法もあります。）

次に、メッセージに枠を付けましょう。（その２）へ進んでください。

（その２）へ進む ---＞

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

Last update: