イメージ

mouse-over、depressed、および disabled 状態を、<input type='image'> タグ、<input type='button-type'> タグ、 または <img> に追加します。

JSF イメージ・コンポーネントは、4 種類の可視状態 (normal or up、depressed、moused、および disabled) を提供して、 タイプ・ボタン (例えば、実行、リセット、ボタン、およびイメージ) の 標準 HTML <img> または <input> タグを強化するために使用されます。 さらに、スタイル設定または位置指定が可能なラベル (既にラベルを持つボタンの 場合は 2 番目のラベル) およびアイコン (小さいグラフィック) を イメージ・ボタンに追加するために使用することもできます。

最も単純な (属性が提供されていない) 場合、 事実上、CSS 疑似クラス吹き出しのサポートが提供されます。 CSS で (classname:hover ではなく) classname_moused を (CSS を介して) 指定すると、 ボタン上にマウスオーバー効果が付加されます。同様に、depressed および disabled の場合は、ボタンのスタイルを指定する機能が提供されます。

コンポーネントでは、状態を提供するだけでなく、 (既にボタン内にあるグラフィック/テキストのほかに) アイコンをボタンに追加することができます。 例えば、小さな矢印やヒンキーのグラフィックをボタンに追加することができます。 同様に、(ボタンが既に表示しているラベルのほかに) ラベルをボタンに追加できます。 アイコンとラベルも、状態をサポートしています (例えば、ラベルはマウスオーバーで赤色に、アイコンは黒にすることができます)。

イメージ・ボタンの場合 (<input type="image">)、コンポーネントは、ボタンの状態に基づいて src 属性の値を スワッピングする、JavaScript 提供の共通機能をサポートします (例えば、マウスがボタン上にあるときに、別のイメージに切り替えます)。

<img> の場合、JSF イメージは事実上、タグをボタンに変えます。 イメージをクリックするとアクションが実行されるようにする場合は、 クリック・イベント・ハンドラーを指定する必要があります。キーボードは自動的に img タグに関連付けられるため、 ボタンのクリックに使用できます (クリック・イベント・ハンドラーが呼び出されます)。 taborderimg を配置するように、 tabindex を設定する必要があります (クリックできる場合)。これは、ブラウザーでデフォルトでは行われません。

コンポーネントを発行する JSF タグ

<hx:commandExButton>

基本 HTML

<input type="image" id="id">
<input type="submit" id="id">
<input type="reset" id="id">
<input type="button" id="id">
<img src="src" id="id">

基本タグに設定されるすべての属性がサポートされます。

基本タグに関連付けられているすべてのイベント・ハンドラーがサポートされます。

JavaScript コンストラクター

hX_5.addComponent("id", new hX_5.JSFImage(attributes)); 各部の意味は次のとおりです。

id

コンポーネントが付加される HTML タグの ID。

属性

コンマで区切られた属性のリスト。 各属性は、属性名と値から成る引用符付きストリングになっており、 コロンで区切られています (例: "label:MyLabel")。

属性

表 1. イメージ属性

属性名

説明

depressed

ボタンを押したときに表示される イメージの URL (タイプ・イメージのイメージとボタンの場合のみ) 省略すると、ボタンを押したときに標準イメージが使用されます。

disabled

オブジェクトを使用可能にするかどうかを指定します。

icon-normal

通常の状態のときに、 イメージ/ボタンの上部に表示されるアイコン・イメージの URL。 (例: そのボタンがドロップダウンであることを表す、小さな三角形のイメージ。)

icon-moused

マウス・カーソルが イメージ/ボタン上に置かれているときに、 アイコンとして表示されるイメージの URL (吹き出しの場合)。 この属性を使用する場合は、標準イメージも提供する必要があります。 省略すると、標準イメージが使用されます (吹き出しの場合)。

icon-depressed

イメージ/ボタンを押したときに、 アイコンとして表示されるイメージの URL。 この属性を使用する場合は、標準イメージも提供する必要があります。 省略すると、ボタンを押したときに標準イメージが使用されます。

label

オブジェクト用に表示するテキスト。

moused

ボタン上に マウス・カーソルが置かれているときに 表示されるイメージ (吹き出し) の URL (タイプ・イメージのイメージとボタンの場合のみ)。 省略すると、標準イメージが使用されます (吹き出しの場合)。

normal

ボタンが通常の状態 (マウスオーバーされていない、 押されていない、使用不可になっていない) であるときに表示される、 イメージの URL (タイプ・イメージのイメージとボタンの場合のみ)。 <input> タグの src 属性を使用して、 ボタンのイメージを指定することもできます。 イメージ・タグの場合、HTML の 制約により、src を使用しない場合でも src を 必ず提供する必要があります。
注: この属性を始め、URL を提供する すべての属性において、URL は ファイル・システム上のファイルを参照できます。 URL を URL Prolog にラップさせることも可能です。 イメージは、属性として指定する 代わりに、CSS を使用して指定することもできます。

CSS クラス

表 2. イメージ CSS クラス

CSS クラス名

説明

user-supplied

<input> タグ または <img> タグのクラスとして提供されます。 通常 (稼働) モードでの、 イメージ/ボタンのスタイルの プロパティーを設定します (例えば、高さ、幅、背景色の設定)。
注: イメージ/ボタンの種類やボタンの状態にかかわらず、 背景イメージのスタイル・プロパティーを使用して、 ボタンとして使用されるイメージを指定することができます。 これを指定する場合、 高さと幅のプロパティーも指定する (背景 イメージのサイズに合わせる) 必要があります。

<base>_moused

マウスオーバーした場合の、 イメージ/ボタン (吹き出しの場合) のスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、マウス・カーソルを置いたときに、 通常の状態が使用されます。

<base>_depressed

イメージ/ボタンが押された場合の、 イメージ/ボタンのスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。

<base>_disabled

使用不可の場合の、 イメージ/ボタンのスタイルのプロパティーを設定します (例えば、 高さ、幅、背景色の設定)。 省略すると、使用不可の場合に通常の状態が使用されます。

<base>_Label

通常 (稼働) 状態のラベルのスタイルを 設定します (ラベルが指定されている場合)。 ラベルのフォント・プロパティー (フォント・ファミリーや フォント・サイズなど) は、 このクラスで指定する必要がありますので注意してください。 これらは、基底クラスからは選出されません。

<base>_Label_moused

ボタンが通常 (稼働) 状態であるときの、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、ラベルに通常の状態が使用されます (吹き出しの場合)。

<base>_Label_depressed

ボタンが押された場合の、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。

<base>_Label_disabled

ボタンが使用不可の場合の、 ラベルのスタイルを設定します (ラベルが指定されている場合)。 省略すると、使用不可の場合に通常の状態が使用されます。

<base>_Icon

通常 (稼働) 状態の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。

<base>_Icon_moused

ボタンが通常 (稼働) 状態の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、アイコンにマウス・カーソルを置いたときに、 通常の状態が使用されます。

<base>_Icon_depressed

ボタンが押された場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、ボタンが押された場合に、 通常の状態が使用されます。

<base>_Icon_disabled

ボタンが使用不可の場合の、 アイコンのスタイルを設定します (アイコンが指定されている場合)。 省略すると、使用不可の場合に通常の状態が使用されます。

注:
  • アイコン・クラスでは、少なくとも通常のケースで background-image が提供される場合、 アイコンはこの背景イメージを使用して描画されます (明示的なアイコン属性が 設定されても、設定されなくても)。これにより、アイコンは CSS のみを経由して 指定できるようになります。
  • ラベルおよびアイコン・クラスでは、ボタン内で要素をどのように位置指定するかは、 スタイル・プロパティーの位置によって決まります。position が absolute の場合は、 left、top、right、および bottom を使用して、ボタン内でアイコンまたはラベルを絶対的に 位置指定することができます。position が relative (デフォルト) の場合は、text-align および vertical-align を使用して、要素を位置指定することができます。text-align は left、right、および center をサポートし、vertical-align は top、middle、および bottom (のみ) をサポートします。
  • 相対的位置付けを使用する場合、ラベル要素で、padding または margin のいずれかを使用して、 要素を上/下/左/右に「動かす」ことができます。ただし、アイコン要素 (IMG) では、 IE は padding をサポートしないため、margin を使用する必要があります。 また、アイコン要素では、IE は右および上のマージンをサポートしません (そのため、ボタン内で 2 ピクセルの「右寄せ」をする場合は、position:absolute 位置決めを使用し、right:2px を設定します)。
  • イメージ・ボタン上に境界線を設定する場合、IE はフォーカス枠を上に 描画する傾向にあるため、境界線の色が濃いと、フォーカス枠が見えにくくなります。
  • JSF コンポーネントと同様に、動的に使用不可にする (つまり、 JS を介して使用不可にする) 場合、使用不可にした後、再描画する必要があります。 (ボタンが 使用不可になるとすぐに、DHTML は属性変更メッセージの伝搬を停止します。 そのため、ボタンが使用不可にされていることはボタン・コードには伝えられず、 明示的に伝えない限り、再描画されません。)

API 呼び出し

表 3. イメージ API 呼び出し

API 呼び出し

説明

redraw()

基本タグの属性/プロパティーに加えられた 変更内容が反映されるように、コンポーネントを書き直します。

uirelease()

コンポーネントに関連付けられたアクティブ UI をリリースします。

setValue(string)

コンポーネントの値を設定し、提供された値が有効であることを確認します。

object = getValue(boolean)

コンポーネントの値を取得します。 ブール値が false である場合は、基本タグの値を取得することに相当します。 ブール値が true である場合は、 ストリングではなく、JavaScript™ の 日付/時刻オブジェクトとして、値が戻されます。

object = setAttribute(attribute)

属性を設定します。 属性がすでに設定されたものである場合は、 その値を変更します。

string = getAttribute(attribute-name)

属性の現行値を取得します。

制限

アイコンまたはラベル付きの レンダリングされたボタンでは、マウス・ポインターがボタン上にあるときにマウス・ポインターを押し、 (ボタンが押し下げられた状態で) ボタンから離れた場合、振る舞いは 標準の Windows® ボタンの振る舞いと一致しません。 Windows では、 カーソルがボタンから離れている間、ボタンは押されている可能性があり、カーソルが離れている時にマウス・ボタンを 離しても何も起こりません。ただし、(マウス・ボタンを押したまま) カーソルを 移動してボタン上に戻すと、ボタンは再度押し下げられて、 mouse-up によってクリックされます。JSF イメージ・ボタンでは、 ボタンから離れたときも、ボタンは正しく押されています。移動して戻る場合、 再度ボタンを押し下げられる場合とできない場合があります。IE では、mouse down で マウスがボタン上にある場合のみクリックすることができ、mouse up でボタン上に戻ります。 Mozilla では、振る舞いの信頼性は低くなります。

サンプル・コード

マウスオーバー時のイメージ、 押し下げイメージ、およびクリック・ハンドラーを <img> タグに追加します。 イメージはすべて CSS で指定されます。

<style>
.green, .green_moused,  .green_depressed {
    border-width: 0px;
    height: 25px;
    width: 113px;
    background-repeat: no-repeat;
}
.green { background-image: url("img/green-button.gif") }
.green_moused {	background-image: url("img/green-button-moused.gif") }
.green_depressed { background-image: url("img/green-button-depressed.gif") }

<img border='0' class="green" id="image1" src="img/1x1.gif" onclick="return doClick(this, event);">
<script>
hX.addComponent("image1", new hX.JSFImage());
</script>

CSS を使用してマウスオーバー効果 (強調) を JSF ボタンに追加します。

<style>
.button, .button_moused {
    border-width: 2px;
    border-style: solid;
    border-color: black;
    color: black;
    font-weight: normal;
    width: 100px;
}
.button_moused {
    border-color: blue;
    font-weight: bold;
}
</style>

<hx:commandExButton type="submit" styleClass="button" id="button1"></hx:commandExButton>
<script>
hX.addComponent("form1:button1", new hX.JSFImage());
</script>

マウスオーバー時のイメージ、押し下げイメージ、使用不可のイメージ、 ラベルおよびアイコンを、HTML ボタンに追加します。

<style>
<script>
.button4a, .button4a_moused, .button4a_depressed {
    width:100px;
    height:21px;
}
.button4a_Label, .button4a_Label_moused, .button4a_Label_depressed {
    font-family: sans-serif;
    color: black;
    font-size: 14px;
    text-align: left;
    margin-left: 24px;
}
.button4a_Label_depressed { margin-left:25px; margin-top:2px; }
.button4a_Icon, .button4a_Icon_moused, .button4a_Icon_depressed {
    text-align: left;
    margin-left: 4px;
    height: 17px;
    width: 17px;
    background-repeat: no-repeat;
}
.button4a_Icon_depressed { margin-top:2px; margin-left:5px; }
</script>
<input type="image" class="button4a" id="button2" name="form1:text21" alt="Search" title="Search" />
<script>
hX.addComponent("form1:button2", new hX.JSFImage("icon-normal:img/search-icon.gif",  
                "icon-moused:img/search-icon-moused.gif", "normal:img/search-button.gif", 
                "moused:img/search-button-moused.gif", "depressed:img/search-button-depressed.gif",
                "label:search"));
</script>

フィードバック