第5章 ポップアップウィンドウを作る


ポップアップウィンドウは、ちょっとした用語の説明などに便利です。



左の図のように、リンクされた語句やイメージをクリックすると 飛び出してくるのがポップアップウィンドウです。



作り方には、いくつかの方法がありますが、ここでは 一番汎用性のある作り方を解説します。

1.JavaScriptを記述したテキストファイルを作る   これに、フォントの指定や表示する文を記述しておく 2.トピックファイルのHTMLのヘッダ部分に1.のjsファイルを   呼び出すスクリプトを書く 3.HEADまたはBODY部分にOBJECTタグを挿入する 4.リンクしたいものをAタグで挟む

これだけでは、説明不足なので1つずつ解説します。

1.のjsファイルですが、HTMLの中にJavaScriptを記述する場合

  <SCRIPT language="javascript">........</SCRIPT>

のように書きますが、......部分があまりに長いと見にくくなります。 そこで、スクリプト部分を他のファイルに書くことができます。 これがjsファイルです。

// test.js By Y.Kumei

MyFont="MS ゴシック,12"
MyText1="function, Cではあるひとかたまりの処理手順としての機能を記述したもの"
MyText2="Beginner's All-purpose Symbolic Instruction Codeの略です"

コメントは//で入れることができます。

フォントの変数(上の例ではMyFont)="フォントフェイス名,フォントサイズ,キャラクターセット, (PLAIN, BOLD, ITALICまたはUNDERLINE)"

のようにフォント変数を指定します。省略するとデフォルトのものが使われます。

文字列変数(ここではMyText1, MyText2)="表示したい文字列"

改行したいところに「\n」を入れることもできます。

2.についてはHEAD部分に

<SCRIPT language="JavaScript" SRC="../test.js">
</SCRIPT>

のタグを入れます。SRCの所は1.で作ったファイル名です。 パスの区切りはスラッシュで表します。1つ上のフォルダは「..」で 表します。

3.HEADまたはBODY部分にOBJECTタグを挿入(ActiveXコントロールです)しますが、内容は 次のようにします。

<OBJECT id=NO2
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" >
</OBJECT>

id以外の所はすべて同じにしておいてください。idは自分で 任意に指定します。

さて、あとはポップアップウィンドウを出したいところをAタグで 挟みます。

<A HREF=JavaScript:NO2.TextPopup(MyText1,MyFont,9,9,-1,-1)>ここをクリック</A>

TextPopupはActiveXコントロールのメソッドです。

(OBJECTタグで指定したid).TextPopup(文字列変数, フォント変数, 左右のマージン, 上下のマージン, 文字色, 背景色)

のように使います。

しかし、文字色、背景色は自由に指定することができません。文字色は-1(黒)、 背景色は0(白)、-1(薄い黄色)となっています。

これで、ボップアップウィンドウを出すことができるようになりました。


[Index] [総合Index] [Previous Chapter] [Next Chapter]

Update Sep/24/2000 By Y.Kumei
当ホーム・ページの一部または全部を無断で複写、複製、 転載あるいはコンピュータ等のファイルに保存することを禁じます。