HTML Helpの作成方法(応用編)
トピック中のボタンのスタイルを変える

キーワードリンクやアプリケーションへのショートカットなど、HTML HelpのActiveXコントロールのコマンドを呼び出す場合、トピック中にボタンを設定し、そのボタンをクリックするとコマンドが実行されるようにします。たとえば次の(A)のボタンをクリックすると、HH Versionコマンドで、HTML Help ActiveXコントロールのバージョンを表示します。

  • HTML Help ActiveXコントロールがNetscapeをサポートしていないため、Netscapeでご覧の場合は、ボタン(A)が表示されません。また、(A)〜(C)のいずれのボタンも動作しません。

(A)

このボタンの代わりに、(B)のように通常のテキストをクリックすると、コマンドが実行されるように設定できます。

(B)
バージョンを表示

さらに、テキストに対してカスケーディングスタイルシートでボーダーや背景色を設定することで、(C)のようなボタンを作ることができます。(Internet Explorer 4.x、5でのみ有効です。IE3.02、の場合、スタイルシートのサポートが不完全なので、(C)のボタンが正しく表示されません。)

(C)

設定方法

(A)には、次のように設定しています。

<OBJECT
id=hhctrl type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
>
<PARAM name="Command" value="HH Version">
<PARAM name="Button" value="Text:バージョンを表示">
</OBJECT>

ActiveXコントロールはアイコン(HTML Help ActiveX Control)で挿入しますが、このとき[HHCTRL: Display Type]ダイアログで[As a button]を設定すると、<PARAM name="Button" value="Text:バージョンを表示">の行が追加され、ボタンが表示されます。

(B)には、次のように設定しています。

<OBJECT
id=ver1 type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
>
<PARAM name="Command" value="HH Version">
</OBJECT>
<A href="javascript:ver1.Click()">バージョンを表示</A>

このように、(A)の<PARAM name="Button" value="">の部分を削除し、<A href="javascript:ver1.Click()">リンクテキスト</A>を追加すると、「リンクテキスト」の部分に入力したテキストをクリックして、ActiveXコントロールのコマンドを実行できるようになります。

  • アイコン(HTML Help ActiveX Control)でActiveXコントロールを挿入するときに、[HHCTRL: Display Type]ダイアログで[Hidden (only used for scripting)]を選択すると、<PARAM name="Button" value="">が挿入されません。この後で<A href="javascript:ver1.Click()">リンクテキスト</A>を追加するだけです。
  • スクリプトからActiveXコントロールを呼び出すためには、呼び出すActiveXコントロールにそのファイル中でユニークなidを付ける必要があります。このため、(B)と(A)でidを変えています。

(C)には、次のように設定しています。

<OBJECT
id=ver2 type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
codebase="hhctrl.ocx#Version=4,74,8793,0"
>
<PARAM name="Command" value="HH Version">
</OBJECT>
<div class="verbutton">
<A href="javascript:ver1.Click()">バージョンを表示</A>
</div>

OBJECT要素の内容は、(B)と同じです。最後の行でdiv要素のverbuttonクラスに指定した範囲にカスケーディングスタイルシートでボタンのスタイルを設定しています。

スタイルシートの内容は、次のようになります。各プロパティの値を変更することで、ボタンのサイズや色を変更できます。

<STYLE type="text/css">
<!--
.verbutton{
width: 9em;
font-size: 80%;
background-color: #0066CC;
border-width: 0.3em;
border-color: #CCCCCC;
border-style: outset;
padding: 0.2em;
text-align:center;
}
.verbutton A{
text-decoration: none;
color: #FFFFFF;
}
-->
</STYLE>

  • Internet Explorer 4.xではAに対するボーダーの指定が無効になるため、divで範囲指定した上で、その範囲に対してスタイルを設定しています。
  • 上の例はHEAD要素内で指定する場合のものです。この他に、外部スタイルファイルで指定したり、インラインで指定することも可能です。