このダイアログでは、新しい画像アンカーを作成します。画像アンカーは、クリッカブルなテキストがクリッカブルな画像に置き換わっている点以外は、アンカーと同様です。<netui:imageAnchor> タグは、画像アンカーのソース コードを提供します。
ページ フロー パースペクティブで、[デザイン パレット] から画像アンカー アイコンを JSP ページのソース ビューにドラッグ アンド ドロップします。画像アンカー アイコンは、[NetUI] というラベルのセクション内にあります。
このダイアログには 3 つの異なるモードがあり、[アンカー プロパティ] セクションのラジオ ボタンから制御できます。各モードは、利用可能なフィールドの異なるセットを表します。以下にこれらのモードを示します。
[アクション] モードでは、次のフィールドが表示されます。
[アクション] : 呼び出すアクション メソッド。
[ソース] : クリッカブル画像のパス。
[代替] : 画像の代替テキスト。
[整列] : 画像の配置を設定する。
[幅] : 画像の幅を設定する。
[高さ] : 画像の高さを設定する。
[パラメータ] : Java パラメータとしてアクション メソッドに渡されるパラメータと値の組み合わせ。
ダイアログに以下の値が入力された場合を例として示します。
[アクション] : getCustomers.do
[ソース] : /images/myImages.gif
[代替] : alt
[整列] : top
[幅] : 100
[高さ] : 100
次の NetUI タグ セットが作成されます。
<netui:imageAnchor action="getCustomers.do" align="top" alt="alt" height="100" src="/images/myImages.gif" width="100"/>
最終的な HTML は、次のように表示されます。
<a href="/CustomerCare/customerManagement/getCustomers.do?param1=value1"><img src="/images/myImages.gif" alt="alt"></a>
このリンクをクリックすると、以下のアクションが起動されます。
@Jpf.Action(...)
public Forward getCustomers(String param1) {
...
}
[ハイパーリンク] モードでは、次のフィールドが表示されます。
[ハイパーリンク] : 呼び出すアクション メソッド。
[ソース] : クリッカブル画像のパス。
[代替] : 画像の代替テキスト。
[整列] : 画像の配置を設定する。
[幅] : 画像の幅を設定する。
[高さ] : 画像の高さを設定する。
[パラメータ] : Java パラメータとしてアクション メソッドに渡されるパラメータと値の組み合わせ。
ダイアログに以下の値が入力された場合を例として示します。
[ハイパーリンク] : /CustomerCare/customerManagement/somePage.jsp
[ソース] : src
[代替] : alt
[整列] : top
[幅] : 100
[高さ] : 100
次の NetUI タグ セットが作成されます。
<netui:imageAnchor href="/CustomerCare/customerManagement/somePage.jsp" align="top" alt="alt" height="100" src="src" width="100"/>
以下の HTML が表示されます (「CustomerCare」はプロジェクト名、「customerManagement」は該当ページ フローへのパスを表す)。
<a href="/CustomerCare/customerManagement/somePage.jsp?"><img src="/CustomerCare/customerManagement/images/myImage.gif"></a>
ダイアログに以下の値が入力された場合を例として示します。
[名前付きアンカー] : subsection1
[ソース] : images/myImage.gif
次の NetUI タグ セットが作成されます。
<netui:imageAnchor linkName="subsection1" src="images/myImage.gif"></netui:imageAnchor>
以下の HTML が表示されます (「CustomerCare」はプロジェクト名、「customerManagement」は該当ページ フローへのパスを表す)。
<a href="#subsection1"><img src="/CustomerCare/customerManagement/images/myImage.gif"></a>