HTML Helpの作成方法(基本編)
ポップアップを表示する

トピック中のテキストをクリックすると、ポップアップウインドウに文章が表示されるように設定できます。(HTML Help Ver.1.4xでは最大255文字まで表示可)
ポップアップは、コンパイルしていないHTMLファイルでも有効です。ただし、表示にはInternet Explorer 3.x以降+HTML Help ActiveXコントロールが必要です。

ポップアップは、HTML Help Workshopのメニューでは設定できません。トピックファイルに直接次のように記述してください。

<OBJECT
id="hhctrl"
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
width="0"
height="0"
>
</OBJECT>

<A href=javascript:id=hhctrl.TextPopup("ポップアップに表示する文字",フォント名[,フォントサイズ[,文字コードセット,[plain bold italic underline],左右マージン,上下マージン,文字色,背景色)>リンクテキスト</A>

文字色、背景色はRGB値で指定するのですが、HTML Help 1.32の段階では色が正しく表示されません。「-1,-1」と指定してください。文字色が黒色、背景色がクリーム色になります。

例)下の「ポップアップ」の箇所には、次のように記述しています。

<OBJECT
id="hhctrl"
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
width="0"
height="0"
>
</OBJECT>

<A href=javascript:id=hhctrl.TextPopup("クリックするとポップアップが表示されます。","MSゴシック,11",9,9,-1,-1)>ポップアップ</A>

ポップアップ

ポップアップのテキストを途中で改行するには

長文のテキストをポップアップウインドウに表示すると、途中で改行されます。改行位置やポップアップウインドウの横幅は自動的に決定されます。特定の位置で改行したい場合は、改行位置に「\n」と入力してください。
たとえば、次のように入力すると、テキストが2箇所で改行されて表示されます。

<A href=javascript:id=hhctrl.TextPopup("クリックすると\nポップアップが\n表示されます。","MSゴシック,11",9,9,-1,-1)>ポップアップ</A>

改行を指定したポップアップ

この方法で改行位置を揃えて指定することで、ポップアップウインドウの横幅を調整することもできます。

ポップアップ中にリンクを設定するには

残念ながらHTML Helpのポップアップには通常のテキストしか表示できません。テキストにリンクを設定したり、画像を表示することはできません。これらが必要な場合は、次のような代替手段があります。

  • ニ次ウインドウを表示する→「二次ウインドウを表示する」
    ツールバーをオフにした二次ウインドウを定義し、リンク先のトピックを二次ウインドウに表示するようにします。
  • WinHelpのポップアップを表示する→「HTML HelpとWinHelp間のジャンプを設定する」
    ポップアップ専用のWinHelpを作成し、HTML HelpのトピックからWinHelpにリンクします。WinHelpのポップアップには、通所うのトピックと同様にリンクを設定したり画像を挿入したりできます。Windows 98のヘルプなどではこの方法が取られています。

この他、通常のWebサイトの場合と同様にJavaScriptなどを利用してポップアップを表示することができます。ただし、HTML Help自体の機能を利用する場合よりも表示に時間がかかります。

イメージマップとポップアップを組み合わせる

通常のHTMLのイメージマップと組み合わせると、画像の一部をクリックすると、対応するポップアップが表示されるように設定できます。

ここでは画面の四角形と円形の部分をクリックすると、それぞれに 対応するポップアップを表示するように設定します。

<OBJECT
id="hhctrl2"
type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
width="0"
height="0"
>
</OBJECT>

<IMG src="images/sample.gif"
usemap="#zukei"
width="170"
height="99"
border="0"
>

<MAP name="zukei">
<AREA
shape="circle"
coords="128,60,30"
A href="javascript:hhctrl2.TextPopup (MyText1,MyFont,9,9,-1,-1)" >
<AREA
shape="rect"
coords="11,11,82,63"
A href="javascript: hhctrl2.TextPopup (MyText2,MyFont,9,9,-1,-1)" >
</MAP>

<SCRIPT language="javascript">
MyFont="MS Pゴシック,10"
MyText1="円形をクリックすると表示される"
MyText2="四角形をクリックすると表示される"
</SCRIPT>

最初にOBJECT要素でHTML Help ActiveXコントロールを埋め込みます。 ここではidを「hhctrl2」にしています。
次にトピックファイルにイメージファイル(sample.gif)を挿入し、 イメージマップを設定します。AREA要素でイメージ上の四角形、円形の範囲の座標を指定し、それぞれの範囲をクリックしたときに、HTML HelpのTextPopupメソッドで、 ポップアップが表示されるようにします。
最後に 「MyFont」と「MyText1〜2」の変数に代入する値を指定します。

画像上のポップアップ例 画像のポップアップ例