文字や写真のポップアップ表示
       ホームページ作成用ミニツール

どんなソフト?
定義した文字列や写真をポップアップウインドウ上に表示することができます。
動作環境
E5以上及びN6以上のブラウザ
呼び出し形式
ポップアップウインドウの表示
PopupVisible(Object, nMouseX, nMouseY, nPageX, nPageY)

パラメータ詳細
Object<-表示する文字列を定義したオブジェクト名
nMouseX<-マウスの座標(X)
nMouseY<-マウスの座標(Y)
nPageX<-ページ上の座標(X)
nPageY<-ページ上の座標(Y)


ポップアップウインドウの非表示
PopupHide(Object)

パラメータ詳細
Object<-表示する文字列を定義したオブジェクト名


文字列オブジェクト定義
<div id="オブジェクト名" class="popupwindow">表示したい文字列</div>
呼び出し例
  1. ヘッダー部にJavaScriptとスタイルシートのリンク定義を追加します。
    <head>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="./popup.css">
    <script src="./popup.js"></script>
    </head>
  2. ポップアップ表示させたい所に関数の呼び出しを定義します。
    <div id="sample" class="popupstyle" onmouseover="PopupVisible('test', event.x, event.y, event.pageX, event.pageY)" onmouseout="PopupHide('test')">テスト</div>
  3. 表示したい文字列を定義します。
    <div id="test" class="popupwindow">表示したい文字列</div>
動作サンプル
文字列のポップアップ表示
写真のポップアップ表示
作者のコメント
最初は単純にポップアップさせていましたが、ネスケで確認してみると全然動いていなかったので作り直しました。このように互換の問題があると凄く面倒ですね。(かなり腹立たしい!!)
プログラム自体は定義されているオブジェクトをポップアップするだけなので、定義オブジェクトに色々書いておけばそのままポップアップされます。
ダウンロードしてみる
popup.zip をDownLoadする